如何在輸入復選框中檢索值（使用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); } 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}