Javascript 更改数组中特定对象属性的状态值

当用户选中目标

的复选框时，是否有方法在

this.state.items

中改变特定项对象的

done

属性的值？例如，如果我选中ID为

0

的

内的复选框，则其

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

const Item=props=>(

{props.name}

)
类Foo扩展了React.Component{
状态={
项目：[
{id:0，名称：'Item 1'，done:false}，
{id:1，名称：'Item 2'，done:false}，
{id:2，名称：'Item 3'，done:false}
]
}
toggleDone=（e）=>{
// ???
}
render（）{
返回(

{this.state.items.map（item=>(
))}

)
}
}

首先，需要将项目的

索引

传递给事件处理程序

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

---

首先，需要将项的

索引

传递给事件处理程序

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

---

@是的。我更新了答案。应该是

{done:e.target.checked}

。谢谢！非常感谢。但是有一个问题，它重新呈现整个组件，而不仅仅是目标

。非常有用。你是说重新加载还是dom更新？当更新

状态时

，整个组件将重新加载，但只会更新实际dom树中更改的元素。如果是这样，那就不是问题。这就是react的工作原理。我的意思是，不必要的重新渲染，但我修复了它。再次感谢。@jstarnate是的。我更新了答案。应该是

{done:e.target.checked}

。谢谢！非常感谢。但是有一个问题，它重新呈现整个组件，而不仅仅是目标

。非常有用。你是说重新加载还是dom更新？当更新

状态时

，整个组件将重新加载，但只会更新实际dom树中更改的元素。如果是这样，那就不是问题。这就是react的工作原理。我的意思是，不必要的重新渲染，但我修复了它。再次感谢。