javascript - How to pass checkbox state to onClick Function in React - Stack Overflow

admin管理员组

文章数量:1254036

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 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.

• javascript
• reactjs

Share Improve this question Follow asked May 14, 2018 at 12:18 Matthias SeifertMatthias Seifert 2,08333 gold badges3131 silver badges4141 bronze badges 2

• 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 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 Seifert Commented May 15, 2018 at 6:01

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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

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)}
/>

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./yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

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

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

本文标签： javascriptHow to pass checkbox state to onClick Function in ReactStack Overflow