How to pass checkbox state to onClick Function in React

Question

I am currently a bit lost with this - as I thought - trivial task. I have some checkboxes in my React App which have a onClick Function. Now I need to pass the info to the function, if I just checked or unchecked the checkbox.

<input type="checkbox"
       name={field}
       id={field}
       onClick={() => this.buildTemplate(objectA, objectB, checkboxState)}
/>
<label htmlFor={field}>
    {getLabel(`${this.props.modelType}.${fieldName}`)} 
</label>

When the function is called, I need to do some stuff depending on the state of the checkbox.

buildTemplate = (objectA, objectB, checked) => {
    checked ? yep() : nope();
};

I tried to bind the checkbox like this, and it worked, but now I dont know how to pass the other arguments in this function.

onClick={this.testFunc.bind(this)}

...

testFunc(event) {
    console.log(event.target.checked)
}

I also found this question, where the accepted answer suggested refs, but I may have a lot of checkboxes, and it seems a bit overkill to me, to create refs just to pass the current state of the checkbox. I think there is a dumb solution for this, but it seems like I can't figure it out.

I know you already accepted an answer and there is no need to change but I want to remember my answer as a newbie. I've edited it to explain why I preferred this method. — devserkan, May 14 '18 at 12:45
@devserkan Thanks for your answer and your time to be so detailed. I gave all the answers an upvote, since they are not wrong and can be absolutely helpful aswell. I just accepted the guy who posted the first helpful answer here, that actually helped me solve my problem, which I think is fair :) — Matthias Seifert, May 15 '18 at 06:01

Gautam Naik · Answer 1 · 2018-05-14T12:30:07.433

5

Send arguments like this

 onClick={(event) => this.buildTemplate(objectA, objectB, event)

then in the fuction use this

event.target.checked

to get value of checkbox

edited May 14 '18 at 12:30

answered May 14 '18 at 12:23

Gautam Naik

8,990
3
27
42

score 3 · Accepted Answer · answered May 14 '18 at 12:26

3

You can pass event object from onClick handler to action method as below:

<input type="checkbox"
       name={field}
       id={field}
       onClick={(event) => this.buildTemplate(objectA, objectB, event)}
/>

answered May 14 '18 at 12:26

Raeesaa

3,267
2
22
44

devserkan · Answer 3 · 2018-05-14T12:46:42.807

Without binding your function and without an arrow function in your onClick, you can define an external arrow function and set this for onClick:

// or name this function as buildTemplate and use for onClick below
handleCheck = ( event ) =>
    event.target.checked
        ? yep()
        : nope()


<input type="checkbox"
       name={field}
       id={field}
       onClick={this.handleCheck}
/>
<label htmlFor={field}>
    {getLabel(`${this.props.modelType}.${fieldName}`)} 
</label>

I know you need some objects but I think you can reach those inside your function. Why I am suggesting this method: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

TAHA SULTAN TEMURI · Answer 4 · 2018-05-14T12:35:44.383

2

Its simple to get the result of checkbox change in React

see example Here

or

Simply

 <input type="checkbox"
   name={field}
   id={field}
    onChange={this.handleInputChange} 
   />    





  handleInputChange(event) {
  const target = event.target;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const name = target.name;

     this.setState({
     [name]: value
     });
  }

edited May 14 '18 at 12:35

answered May 14 '18 at 12:28

TAHA SULTAN TEMURI

4,031
2
40
66

score 2 · Answer 5 · answered May 21 '21 at 05:24

You can simply pass the event object in the onClick handler. Just look at the code below:

<input type="checkbox"
   name={field}
   id={field}
   onClick={(event) => this.buildTemplate(objectA, objectB, event)}
/>

Now you can easily get the value of the checkbox by the code below:

event.target.checked

How to pass checkbox state to onClick Function in React

5 Answers5