javascript - ReactJS - 为动态生成的项目设置唯一状态

Question

我正在从服务器获取一些数据来填充项目列表，每个项目都有一个绑定(bind)到项目 ID 的 onClick 事件，该事件将 UI 更改为在单击时禁用。

我的问题是，用户界面在第一次单击时完全禁用，但是当我继续单击下一个项目时，它会重置第一个项目，因此只有一个按钮被禁用一次。如何才能禁用所有我想要的项目，而不重置以前的项目？

这是我的组件:

class Video extends Component {
constructor () {
 super()
  this.state = {
   isDisabled: false
 }
}


handleClick(frag, voted, event){
 event.preventDefault()

 this.setState({
   isDisabled: {
      [frag]: true
   }
 })
}

我在更改禁用按钮的 UI 中返回的内容的片段

 <button onClick={this.handleClick.bind(this, frags.id, frags.voted)} disabled={this.state.isDisabled[frags.id]} className="rating-heart-2">
     <i className="fa fa-heart" aria-hidden="true"></i>
 </button>

我真的很感谢所有的提示!

Answer 1

看起来，当您调用 setState 时，您正在覆盖 isDisabled 的先前值。

你可以这样做:

handleClick(frag, voted, event){
 event.preventDefault()

 this.setState({
   isDisabled: {
      ...this.state.isDisabled,
      [frag]: true
   }
 })
}