如何在输入复选框中检索值（使用Reactjs）

Question

我知道这是对其他人的重复问题，但我有问题，为什么他们在我的控制台中没有值输出。

我的目标：我想获得复选框的价值。

我这里有我的代码。

州：

employ_status:''

构造函数：

this.handle_employ_status = this.handle_employ_relocate.bind(this);

处理：

handle_employ_status(e){
        console.log(e.target.checked, e.target.name);
    }

JSX：

<div className="form-check-inline disabled">
    <label className="form-check-label">
        <input 
        type="checkbox" 
        className="form-check-input" 
        name="employmentstatus"
        onChange={this.handle_employ_status} 
        defaultChecked={false} 
        value="Self-Employed"/>Self-Employed
    </label>
</div>
<div className="form-check-inline disabled">
    <label className="form-check-label">
        <input 
        type="checkbox" 
        className="form-check-input" 
        name="employmentstatus" 
        onChange={this.handle_employ_status}
        defaultChecked={false}  
        value="Student"/>Student
    </label>
</div>

安慰：

console.log(this.state.employ_status);

Answer 1

在你的构造函数中

this.handle_employ_status = this.handle_employ_relocate.bind(this);

应该替换

this.handle_employ_status = this.handle_employ_status.bind(this);

Answer 2

你将this绑定到错误的处理程序：

this.handle_employ_status = this.handle_employ_relocate.bind(this);

应该：

this.handle_employ_status = this.handle_employ_status.bind(this);

Answer 3

如果使用箭头函数，则无需在构造函数中进行绑定

handle_employ_status = e => {
    console.log(e.target.checked, e.target.name);
}

另外，要处理复选框值，您可以执行以下操作

 constructor(){
        this.state = {
            empChecked: false,
            stuChecked: true
        }
    }

    handle_employ_status = e = {
        if(e.target.value == "Self-Employed"){
            this.setState({
                empChecked: !this.state.empChecked
            });
        }

        if(e.target.value == "Student"){
            this.setState({
                stuChecked: !this.state.stuChecked
            });
        }
        console.log(e.target.checked, e.target.name);
    }


<div className="form-check-inline disabled">
    <label className="form-check-label">
        <input 
        type="checkbox" 
        className="form-check-input" 
        name="employmentstatus"
        onChange={this.handle_employ_status} 
        defaultChecked={false}
        checked={this.state.empChecked} 
        value="Self-Employed"/>Self-Employed
    </label>
</div>
<div className="form-check-inline disabled">
    <label className="form-check-label">
        <input 
        type="checkbox" 
        className="form-check-input" 
        name="employmentstatus" 
        onChange={this.handle_employ_status}
        defaultChecked={false} 
        checked={this.state.stuChecked}  
        value="Student"/>Student
    </label>
</div>

Answer 4

这些是您的代码中的一些问题：

1. this.handle_employ_status = this.handle_employ_relocate.bind(this);在这段代码中，handle_employ_relocate函数在哪里？
2. 如果你需要使用功能handle_employ_relocate你需要改变你的句柄功能..

   handle_employ_status(e){ //should be named by "handle_employ_relocate"
       console.log(e.target.checked, e.target.name);
   }

3. 在你的.jsx文件中，如果你Control你的组件，你应该删除UnControl属性：defaultChecked={false} //this line should be convert to checked={this.state.employ_status}