我将由我的组件状态管理的布尔值传递给Checkbox组件,但是我遇到了问题,该复选框响应了已更改的状态变量。我第一次单击调用已验证的allRowCheck的复选框时,复选框不会更改。当第二次点击时,它会根据需要及其后进行响应。
render()
{
return(
<div><Table style = {{textAlign: 'right'}} data={this.state.testData2}
rowStyle={(row, index) => {return { textAlign: 'right' };}}>
<Table.Column
header={<Form.Checkbox checked = {this.state.allRows} onChange={() => this.allRowCheck()}/> }
body={
(data) => <Form.Checkbox checked = {data.get('checked')} onChange={() => this.onCheck(data)}/>
}/>
<Table.Column
header={'Name'}
body={(data) => data.get('scenarioName')}
/>
<Table.Column
header={'Condition'}
body={(data) => data.get('condition')}
/>
<Table.Column
header={'Notifications'}
body={(data) => data.get('notifications')}/>
<Table.Column
header={'Owner'}
body={(data) => data.get('owner')}/>
</Table></div>
)
}
allRowCheck = () => {
console.log('all row checks before> ', this.state.allRows);
this.setState({
testData2: this.state.testData2.map((data) => data.set('checked', !this.state.allRows)),
})
//twp set states for no reason..
this.setState({
allRows: !this.state.allRows
}, () => {
console.log('after> ', this.state.allRows)
})
}