更改數組內部特定對象的屬性的狀態值

Question

當用戶選中目標<li>的復選框時，是否有辦法在this.state.items中this.state.items特定項目對象的done屬性值？ 例如，如果我選中ID為0的<li>內的復選框，則其done屬性將變為true 。

const Item = props => (
  <li>
    <input type="checkbox" checked={props.done} onChange={props.event} />
    <span>{props.name}</span>
  </li>
)


class Foo extends React.Component {
  state = {
    items: [
      { id: 0, name: 'Item 1', done: false },
      { id: 1, name: 'Item 2', done: false },
      { id: 2, name: 'Item 3', done: false }
    ]
  }

  toggleDone = (e) => {
    // ???
  }

  render() {
    return(
      <ul>
        {this.state.items.map(item => (

          <Item
            key={items.id}
            name={item.name}
            done={item.done}
            event={this.toggleDone} />

        ))}
      </ul>
    )
  }
}

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 });
}