React 复选框 - 第一次点击(时间)将输出更改为未定义。之后显示有效的 true 或 false 输出。我用谷歌搜索了这个问题,但没有解决问题。
请帮助,我在这里做错了什么。
我在State中定义checked为false:
constructor() {
super();
this.state = {
formFields: {
checked: false,
},
};
}
处理复选框:
handleCheckBox = (e) => {
this.setState({ checked: !this.state.checked });
console.log("checked", this.state.checked);
// this.setState({ checked: !this.state.formFields.checked });
// console.log("checked", this.state.formFields.checked);
};
解构:
const { ...formFields } = this.state;
在表单checkbox中输入如下:
<input
type="checkbox"
checked={formFields.checked}
onChange={this.handleCheckBox}
/>
最佳答案
这是因为 setState
是异步工作的。要获得您想要的行为,请将 console.log 作为回调传递给 setState 函数:
this.setState(
{ checked: !this.state.checked },
() => console.log(this.state.checked)
);
回调将在状态更新后调用。通过在回调之外调用 console.log(),javascript 将在状态更新之前运行 console.log。
这是因为无论如何,在进行任何异步调用之前都必须清除当前调用堆栈。
关于javascript - React 复选框 - Onchange 复选框,第一次未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62423713/