我有一个父容器，它调用一个基于类的 react 子组件（因为语义 ui react 文档都是用基于类的组件编写的）。子组件有一个Form.Field：
<Form.Field
control={Checkbox}
label={{children: 'cardreader'}}
checked = {this.state.cardReaderChecked}
onChange={this.cardReaderToggleHandler}
/>
我有一个state：
state = {
cardReaderChecked: false,
}
和一个cardReaderToggleHandler：
cardReaderToggleHandler = () => {
console.log(this.state.cardReaderChecked);
this.setState((prevState, props) => ({
cardReaderChecked : !prevState.cardReaderChecked
}))
console.log(this.state.cardReaderChecked);
}
我试过切换，this.state.cardReaderChecked但我发现很多参考文献和文档都推荐使用这种方法prevState来避免状态更新的延迟。
但是，必须存在逻辑错误，因为它不起作用。如果我刷新页面，checkbox则清晰为this.state.cardReaderChecked.
我第一次单击checkbox它时会用勾号渲染，然后this.state.cardReaderChecked更新到true（根据我在 Chrome 中值得信赖的 React 工具）。但是，两个console.log打印输出都给了我一个false，如果我将state返回传递给父表单，它也会显示该复选框为假。
每次后续点击都会切换，但勾选checkbox显示true状态，但将 a 传递false给父表单（即console.log当前所在的位置），反之亦然，未勾选的checkbox将传递回 a true。
我几乎想删除not从prev.state在setState，但我更愿意理解为什么会这样。
附加问题：如何查询功能组件中的checkbox状态checked？
将函数作为道具传递给孩子
class Parent extends Component {
state = {
cardReaderChecked: false,
}
cardReaderToggleHandler = () => {
this.setState((prevState, props) => ({
cardReaderChecked : !prevState.cardReaderChecked
}), () => console.log(this.state.cardReaderChecked))
}
....
render () {
return (
....
<Form.Field
control={Checkbox}
label={{children: 'cardreader'}}
checked = {this.state.cardReaderChecked}
onChange={this.cardReaderToggleHandler}
/>
)
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句