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

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

this.handle_employ_status = this.handle_employ_relocate.bind(this);在此代码中，handle_employ_relocate函数在哪里？。
如果您需要使用函数handle_employ_relocate，则需要更改句柄函数。 handle_employ_status(e){ //should be named by "handle_employ_relocate" console.log(e.target.checked, e.target.name); }
在.jsx文件中，如果您Control组件，则应删除UnControl属性： defaultChecked={false} //this line should be convert to checked={this.state.employ_status}

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

4 个答案: