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

我正在从服务器获取一些数据以填充项目列表，并且每个项目都有一个绑定到项目ID的onClick事件，这会更改要在禁用时禁用的UI点击。ReactJS - 在更新状态中的对象时避免重置状态

我的问题是UI在第一次单击时变为完全禁用，但当我继续单击下一个项目时，它会重置第一个项目，因此一次只会禁用一个按钮。我该如何做到这一点，以便我可以禁用所有我想要的项目，而无需重置以前的状态？

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


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

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

片断我在改变残疾人按钮

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

我真的很感激所有提示UI回报！

来源

2017-03-03 DbTheChain

每次更新状态时，您都完全替换isDisabled，但您确实只是想为其添加新属性。请尝试以下操作：

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

this.setState({isDisabled}); 
}

来源

2017-03-03 22:23:06

或者，如果你正在使用从ES6实验性的功能，你可以使用对象蔓延复制所有的属性：'this.setState（{isDisabled：{... this.state.isDisabled，[FRAG ]：true}}）' –

这是真的。另一种可能更喜欢的ES6方法是使用'this.setState（{isDisabled：Object.assign（isDisabled，{frag：true}）}'。 –

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

回答

相关问题