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
– devserkan, Commented May 14, 2018 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 Wünsch
– Matthias Wünsch, Commented May 15, 2018 at 6:01

Gautam Naik · Accepted Answer · 2018-05-14 12:30:07Z

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, 2018 at 12:30

answered May 14, 2018 at 12:23

Gautam Naik

9,4543 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raeesaa · Accepted Answer · 2018-05-14 12:26:11Z

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, 2018 at 12:26

Raeesaa

3,3262 gold badges24 silver badges46 bronze badges

Comments

devserkan · Accepted Answer · 2018-05-14 12:46:42Z

3

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

edited May 14, 2018 at 12:46

answered May 14, 2018 at 12:33

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

Comments

TAHA SULTAN TEMURI · Accepted Answer · 2018-05-14 12:35:44Z

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, 2018 at 12:35

answered May 14, 2018 at 12:28

TAHA SULTAN TEMURI

5,5593 gold badges46 silver badges74 bronze badges

Comments

Jaied · Accepted Answer · 2021-05-21 05:24:46Z

2

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

answered May 21, 2021 at 5:24

Jaied

99612 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to pass checkbox state to onClick Function in React

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related