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