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

数据库链

我正在从服务器获取一些数据以填充项目列表,并且每个项目都有一个绑定到项目 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>

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

约旦善良

isDisabled每次更新状态时,您都在完全替换,但您实际上只想为其添加新属性。请尝试以下操作:

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

 this.setState({isDisabled});
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

ReactJS状态被重置

来自分类Dev

reactJs更新状态对象而不覆盖对象

来自分类Dev

更新深度ReactJS状态

来自分类Dev

reactjs如何更新状态

来自分类Dev

Reactjs:立即更新状态

来自分类Dev

ReactJS:从状态中的对象数组更新特定对象

来自分类Dev

状态不立即更新ReactJS

来自分类Dev

ReactJS - 状态未更新或无效?

来自分类Dev

状态未在 Reactjs 中更新

来自分类Dev

“ReactJs”重置状态而不是唯一ID

来自分类Dev

在数组状态下更新属性对象reactJS

来自分类Dev

更新嵌套在对象内部的数组状态(ReactJS)

来自分类Dev

状态未立即更新时的ReactJS表单验证

来自分类Dev

ReactJS-当状态变量为数字时,SetState不会更新状态

来自分类Dev

ReactJs:如何使用属性处理状态对象

来自分类Dev

ReactJS从状态(对象数组)中删除项目

来自分类Dev

从表单输入更改状态对象变量-ReactJS

来自分类Dev

如何忽略ReactJs中状态的属性更新?

来自分类Dev

如何忽略ReactJs中状态的属性更新?

来自分类Dev

reactjs状态不通过redux更新

来自分类Dev

ReactJs从axios api数据更新状态

来自分类Dev

ReactJs更新相似属性值的状态

来自分类Dev

组件没有收到更新的状态reactjs

来自分类Dev

在reactjs中动态更新/设置状态

来自分类Dev

ReactJS状态更新落后了一步

来自分类Dev

ReactJs-如何更新数组中的状态?

来自分类Dev

reactjs状态不通过redux更新

来自分类Dev

嵌套的 axios 调用不更新 reactjs 的状态

来自分类Dev

ReactJs:更改<input>标记内的状态