无法读取未定义的反应复选框的属性"选中"

Question

我是react的新手。我想用复选框切换值。但是我有一个错误CCD_ 1。代码如下：

import Form from 'react-bootstrap/Form'
class JobList extends Component{
constructor(props){
super(props)
this.state = {
full_time:false
}
this.handleCheckBox = this.handleCheckBox(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleCheckBox(event) {
this.setState({
full_time:event.target.checked
})
}
handleSubmit(event) {
console.log(this.state.full_time)
event.preventDefault();
}
render() {
return(
<div>
<Form onSubmit={this.handleSubmit}>
</Form>
<Form.Check aria-label="option 1" checked={this.state.full_time} onChange={this.handleCheckBox} />
</div>
)

}

我尝试在这个论坛上使用许多答案，但没有一个能解决我的问题。有人能帮我吗？谢谢

Answer 1

您忘记了用函数bind并在组件的构造函数上调用它。

因此，当在handleCheckBox中传递this时，this没有target属性，因此它将返回undefined。

this.handleCheckBox = this.handleCheckBox(this) // issue is here 

要解决此bind函数，请执行以下操作：-

this.handleCheckBox = this.handleCheckBox.bind(this)

Answer 2

在React v16(及更早版本(中，event对象在函数返回后不会挂起。请记住，React状态更新是异步的，因此事件对象可能已被取消并返回到事件池*。在将状态更新排入队列之前，保存checked值。构造函数中也缺少Cannot read property 'checked' of undefined0绑定，请修复该问题或转换为箭头函数，以便自动绑定类的this。

handleCheckBox = (event) => {
const { checked } = event.target;
this.setState({
full_time: checked,
});
}

*注意：React v17中不再是这种情况。

事件

注意：

从v17开始，e.persist()什么都不做，因为SyntheticEvent不再汇集。