假设我有三个元素,它们在状态中保存一个计数器,当被单击时,计数器递增。
如果我单击一个元素,如何将其他计数器重置为0?
https://jsfiddle.net/69z2wepo/56827
const Parent = React.createClass({
render() {
const rows = [];
for (let i = 0; i < 3; i++) {
rows.push(<Child key={i} />);
}
return (
<ul>
{rows}
</ul>
);
}
});
const Child = React.createClass({
getInitialState() {
return {counter: 0};
},
handleClick() {
this.setState({counter: ++this.state.counter });
},
render() {
return (
<div onClick={this.handleClick}>
{this.state.counter}
</div>
);
}
});
ReactDOM.render(
<Parent />,
document.getElementById('app')
);
4条答案
按热度按时间wqsoz72f1#
如果你真的不能像其他答案所建议的那样将lift the state安装到父组件中,那么一个很有技巧的方法就是改变一个元素的
key
属性,这会导致React卸载旧的key
元素,并安装一个新的示例。6rvt4ljy2#
这可能有点困难,因为
Child
组件管理它们自己的状态。您可以将它们转换为哑组件,并在
Parent
组件中管理它们的状态。就像这样
jsfiddle
v8wbuo2f3#
在这种情况下,组件
parent
应按照children
的状态进行管理。检查以下内容:
JsFiddle
nkoocmlb4#