1

I know this is duplicate question to other, however I have problem pertaining why their is no value output in my console.

My Goal: I want to get the value of checkbox.

I have here my codes.

State:

employ_status:''

Constructor:

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

Handle:

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:

console.log(this.state.employ_status);

4 Answers 4

2

In your constructor

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

should be replace with

this.handle_employ_status = this.handle_employ_status.bind(this);
Sign up to request clarification or add additional context in comments.

Comments

2

You're binding this to wrong handler:

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

Should be:

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

Comments

1

You no need to do binding in constructor if you use arrow function

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

Also to handle checkbox values you can do something like below

 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>

Comments

0

These are some issues in your code:

  1. this.handle_employ_status = this.handle_employ_relocate.bind(this); In this code, where is handle_employ_relocate function?.
  2. If you need to use function handle_employ_relocate you need change your handle function.. handle_employ_status(e){ //should be named by "handle_employ_relocate" console.log(e.target.checked, e.target.name); }
  3. In your .jsx file, if you Control your component, you should remove UnControl property: defaultChecked={false} //this line should be convert to checked={this.state.employ_status}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.