CODEWITHSUNDEEP
javascriptreactjs
DevGe
DevGe

Reputation: 1459

How to retrieve value in input checkbox (Using Reactjs)

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);

Upvotes: 1

Views: 88

Answers (4)

Dai Nguyen
Dai Nguyen

Reputation: 79

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}

Upvotes: 0

Hemadri Dasari
Hemadri Dasari

Reputation: 34014

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>

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85633

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);

Upvotes: 2

nishant
nishant

Reputation: 2606

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);

Upvotes: 2

Related Questions