Обновить текстовое оформление на основе значения вложенного состояния - PullRequest
Новая
       19

Обновить текстовое оформление на основе значения вложенного состояния

0 голосов
/ 03 декабря 2018

Вот мой Repl.it: https://repl.it/@colegonzales1/HeftyJoyfulAbilities Я знаю, как передать состояние через мое приложение и создать обработчик, который стилизует каждый элемент, но я чувствую, что есть гораздо более простой способ.Я пытаюсь найти способ стилизовать элемент на основе его значений состояния.Я знаю о .todo-item [done = 'true'], но, поскольку мое состояние вложено так, как оно есть, оно не работает.Есть идеи от моих экспертов CSS там?Ха-ха

И мой Main.js, где хранится мое состояние 

import React, { Component } from 'react';
import TodoInput from './todo-input';
import TodoList from './TodoList';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      todos: [],
      inputValue: ''
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleRemove = this.handleRemove.bind(this);
    this.handleToggle = this.handleToggle.bind(this);
  };

  handleChange = (e) => {
    e.preventDefault();
    this.setState({
      inputValue: e.target.value
    });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    const newTodo = {
      title: this.state.inputValue,
      id: Date.now(),
      done: false
    };
    this.setState((prevState) => ({
      todos: [...prevState.todos, newTodo],
      inputValue: ''
    }));
  }

  handleRemove (e, id) {
    e.preventDefault();
    const newTodos = this.state.todos.filter(todo => todo.id !== parseInt(e.target.id));
    this.setState({
      todos: newTodos
    });
    console.log(newTodos);
  }

  handleToggle (e) {
    const id = parseInt(e.target.id);
    this.setState((prevState) => ({
      todos: prevState.todos.map(todo => todo.id === id ? {...todo, done: !todo.done} : todo)
    }));
    console.log(id);
  }

  render() {
    return (
        <div>
          <TodoInput
          value={this.state.inputValue}
          onChange={this.handleChange}
          onSubmit={this.handleSubmit}
          />
          <TodoList 
          todosArr={this.state.todos}
          onRemove={this.handleRemove}
          onToggle={this.handleToggle}
          />
        </div>
    );
  }
}

export default App;
...