更改数组内部特定对象的属性的状态值

Question

当用户选中目标done的复选框时，是否有一种方法可以改变this.state.items中特定项目对象的<li>属性的值？例如，如果我选中ID为<li>的{​​{1}}内的复选框，则其0属性将变为done。

true

Answer 1

首先，您需要将项目的index传递给事件处理程序。

{this.state.items.map((item,index) => (
   <Item
      key={items.id}
      name={item.name}
      done={item.done}
      event={this.toggleDone.bind(this, index)} />
 ))}

然后，在事件处理程序中，您可以像这样更改状态

toggleDone = (index, e) => {
    // Create new array and new object to avoid state mutation.
    let items = [...this.state.items];
    items[index] = Object.assign({}, items[index], {done: e.target.checked});

    // Set the state with the updated state.
    this.setState({ items });
}