Question

我从服务器获取一些数据以填充项目列表，每个项目都有一个绑定到项目ID的onClick事件，这会更改要在单击时禁用的UI。

我的问题是在第一次点击时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

每次更新状态时，您都会完全替换isDisabled，但实际上您只想为其添加新属性。请尝试以下方法：

handleClick(frag, voted, event){
 event.preventDefault();
 let {isDisabled} = this.state;
 isDisabled[frag] = true;

 this.setState({isDisabled});
}

ReactJS - 在更新状态内的对象时避免重置状态

1 个答案: