React.js：复选框的onChange事件具有意外行为

Question

我正在尝试学习MERN堆栈，所以我是一个React新手。

我有一个名为“ Todolist”的React组件，有一个名为“ ListItem”的子组件。每个列表项都有一个我正在使用此功能处理的复选框：

  handleCheck(e) {
    console.log(this.state.itemID + ": " + this.props.title);
    var completed = e.target.checked;

    console.log(completed);

    this.props.setItemCompleted(
      this.props.listName,
      this.state.itemID,
      completed
    );
    this.props.rerender();
  }

this.props.setItemCompleted从父组件向下传递，该父组件调用数据库以将listItem标记为已完成。然后，调用this.props.rerender，它将更新该父组件的状态以强制重新呈现整个Todolist。

首先，这会导致某些意外行为；有时取消选中特定的ListItem会导致取消选中其他ListItem。为什么会这样呢？从上面，我已经在控制台上检查了每个ListItem的名称和itemID，它会显示正确的信息，但会更新错误的数据库条目。

其次，是否有更聪明的方法来使用React进行此操作？最终，我将允许用户即时更新每个ListItem的其他部分（标题，截止日期，描述，优先级等），并且当用户检查某项是否完成时，此请求由MongoDB处理，并且当整个Todolist组件重新呈现以显示更新的项目时。检查项目会更改ListItems的排序顺序，因此我不能简单地仅渲染单个ListItem。

感谢您的帮助！

Answer 1

您需要在构造函数中绑定handleCheck或使用粗箭头功能

constructor() {
  super(props);
  this.handleCheck = this.handleCheck.bind(this);
}

// or
handleCheck = (e) => {
    console.log(this.state.itemID + ": " + this.props.title);
    var completed = e.target.checked;

    console.log(completed);

    this.props.setItemCompleted(
      this.props.listName,
      this.state.itemID,
      completed
    );
  }