Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

In the following React class I have a checkbox within a div container. I want a click on the container to toggle the checkbox. I also think I need to bind the onChange of the checkbox input itself, to handle things like when the user is tab/spacing to toggle the state of the checkbox (I also get a warning from React if I don't specify an onChange because this is a controlled component).

My problem is that both of the event handlers fire when I click the checkbox itself, so the state of the checkbox doesn't actually change. I have tried e.preventDefault and e.stopPropagation in handleCheckboxChange but neither seems to do anything.

export default class Item extends React.Component{
    constructor(){
        super();
        this.state={
            IsSelected: false
    render(){
        return (
            <div className="item">
                <div className="checkbox-container" onClick={this.handleContainerClick.bind(this)}>
                    <input type="checkbox" checked={this.state.IsSelected} onChange={this.handleCheckboxChange.bind(this)} />
    handleCheckboxChange(e){
        this.setState({
            IsSelected: !this.state.IsSelected
    handleContainerClick(){
        this.setState({
            IsSelected: !this.state.IsSelected
        });     }
If you want the containing <div> to be in "control" of the checkbox's value, then don't put any handler on the checkbox itself.  React will make sure the container will receive the childs click events.
var CheckboxInClickableBox = React.createClass({
  getInitialState: function () {
    return {
      checked: false
  render: function () {
    return (
      <div onClick={this.onClick}>
        <span>{"Checked: " + this.state.checked}</span>
        <input type="checkbox" checked={this.state.checked} />
  onClick: function () {
    this.setState({
      checked: !this.state.checked
Example on JSBin - clicking anywhere in the green box will trigger a toggle.
Also, HTML dictates that a <label> with a for="pie" attribute will pass click events to any <input id="pie">.  This can appear to "break" your checkbox when using the method above - eg:
  render: function () {
    return (
      <div onClick={this.onClick}>
        <label htmlFor="pie">{"Checked: " + this.state.checked}</label>
        <input id="pie" type="checkbox" checked={this.state.checked} />
Clicking the <label> will behave as if there were 2 click events:
the first is the original click event bubbling from the <label> to the <div> and triggering our onClick handler
the second is the <label> "delegating" its click to the <input> element, due to the for attribute (htmlFor in React), which then bubbles up and hits our onClick handler
Example on JSBin - clicking anywhere in the box except the <label> will trigger a toggle.  Clicking the <label> will trigger 2 toggles.
                One problem with setting the onClick on the div only is that React will always log a warning about having an input without an onChange handler.  Now that you mention the htmlFor attribute, I think the correct thing to do is set my container to a <label> instead of a div and set the htmlFor on that.  I tried it in my app and it works like I want it to.  The onChange handler is set on the input but clicking the container toggles the checkbox state as well.
– Sean
                Jan 11, 2016 at 18:27
                Glad I could help. Regarding the onChange handler: The warning provided by React only appears if you skip the onChange handler AND supply a value property, as an input with a static value is likely (though not always) indicative of a design flaw.  This warning has helped me a couple of times when I've forgotten to add onChange={this.onChange} to an input, for example.
– Alex McMillan
                Jan 11, 2016 at 19:57
                Right, but in this case I am supplying a value property because this is a controlled component.
– Sean
                Jan 11, 2016 at 21:05
                @Sean I walked into a similar use-case and I solved it by adding a readOnly property to the checkbox.
– Ruben
                Mar 24, 2016 at 0:05
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.