Может ли дочерний метод иметь обработчик изменений в React? - PullRequest
Новая
       13

Может ли дочерний метод иметь обработчик изменений в React?

0 голосов
/ 03 марта 2020

Мне было интересно , почему дочерний компонент с измененным значением не отображается здесь .

Не лучше ли иметь дочерний элемент для обработки своих собственных изменений или лучше иметь контроллер в родительском элементе? 

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      todos: todosData
    };
  }
  render() {
    const todoItems = this.state.todos.map(item => (
      <TodoItem key={item.id} item={item} />
    ));
    return <div className="todo-list">{todoItems}</div>;
  }
}

Это дочерний TodoItem 

class TodoItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isComp: {}
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange() {
    let tempObj = this.state.isComp;
    tempObj.completed = !this.state.isComp.completed;
    this.setState = { isComp: tempObj };
    console.log(this.state.isComp);
  }
  render() {
    this.state.isComp = this.props.item;
    console.log(this.state.isComp);
    return (
      <div className="todo-item">
        <input type="checkbox" checked={this.state.isComp.completed} />
        <p>{this.props.item.text}</p>
      </div>
    );
  }
}

Как вы можете видеть, состояние изменяется с помощью handleChange(), но это не запускает рендер. Я также не слишком уверен, может ли другой объект быть назначен объекту состояния (let tempObj = thi.state.isComp).

Функциональность, которую я пытаюсь достичь, состоит в том, чтобы проверять и снимать флажок и отображать соответственно.

1 Ответ

1 голос
/ 03 марта 2020

Что это? 

this.setState = { isComp: tempObj };

Я думаю, это должно быть 

this.setState({ isComp: tempObj });
...