嗨,我有一个React应用,这是我的代码:
this.state = {
bars: [{
tom1: Array(16).fill('0'),
}],
}
tom1Click= (i, j) => {
let bar = this.state.bars.slice();
if(bar[i].tom1[j] === '1'){
bar[i].tom1[j] = '0';
}
else
bar[i].tom1[j] = '1';
this.setState({bars: bar})
}
我的页面中有16个Tom组件,我想当其中之一单击状态值更改为0或1时,但是当我单击Toms之一时,整个状态已更新,整个页面都重新呈现 我应该怎么做才能解决这个问题,当我单击组件时,只需重新渲染该组件
答案 0 :(得分:3)
一种更好的方法是让2个组件成为父组件,这将呈现16个子组件,子组件将具有布尔状态,而单击处理程序将具有简单的代码行setState({bar:!this.state.bar});
例如。希望对您有帮助!