React Checkbox not sending onChange

Question

TLDR: Use defaultChecked instead of checked, working jsbin.

Trying to setup a simple checkbox that will cross out its label text when it is checked. For some reason handleChange is not getting fired when I use the component. Can anyone explain what I'm doing wrong?

var CrossoutCheckbox = React.createClass({
  getInitialState: function () {
    return {
        complete: (!!this.props.complete) || false
      };
  },
  handleChange: function(){
    console.log('handleChange', this.refs.complete.checked); // Never gets logged
    this.setState({
      complete: this.refs.complete.checked
    });
  },
  render: function(){
    var labelStyle={
      'text-decoration': this.state.complete?'line-through':''
    };
    return (
      <span>
        <label style={labelStyle}>
          <input
            type="checkbox"
            checked={this.state.complete}
            ref="complete"
            onChange={this.handleChange}
          />
          {this.props.text}
        </label>
      </span>
    );
  }
});

Usage:

React.renderComponent(CrossoutCheckbox({text: "Text Text", complete: false}), mountNode);

Solution:

Using checked doesn't let the underlying value change (apparently) and thus doesn't call the onChange handler. Switching to defaultChecked seems to fix this:

var CrossoutCheckbox = React.createClass({
  getInitialState: function () {
    return {
        complete: (!!this.props.complete) || false
      };
  },
  handleChange: function(){
    this.setState({
      complete: !this.state.complete
    });
  },
  render: function(){
    var labelStyle={
      'text-decoration': this.state.complete?'line-through':''
    };
    return (
      <span>
        <label style={labelStyle}>
          <input
            type="checkbox"
            defaultChecked={this.state.complete}
            ref="complete"
            onChange={this.handleChange}
          />
          {this.props.text}
        </label>
      </span>
    );
  }
});

First off, why not add an onChange that just does this.setState({checked: !this.state.checked}) Easier than having to store a value. Then a ternary operator in the checked attrubute: checked={this.state.checked ? 'checked': null} — zackify
– zackify, Commented Oct 28, 2014 at 18:34
That's how it started out, but it never seemed to update. So I started fluffing it out here and there to debug what wasn't getting fired. Ideally will go back to the simplest form when complete :) — jdarling
– jdarling, Commented Oct 28, 2014 at 18:37
Assuming your mountNode is an actual dom node, you would have to use this.refs.complete.getDOMNode().checked. see fiddle jsfiddle.net/d10xyqu1 — trekforever
– trekforever, Commented Oct 28, 2014 at 18:42
He can just use state instead of getting the dom node though: jsfiddle.net/d10xyqu1/1 It works fine, you must have mistyped something. — zackify
– zackify, Commented Oct 28, 2014 at 18:45
Ignore the TLDR comment - defaultChecked isn't always the answer — Chris
– Chris, Commented Apr 13, 2016 at 14:10

Pierre Arnaud · Accepted Answer · 2015-05-11 03:24:32Z

311

To get the checked state of your checkbox the path would be:

this.refs.complete.state.checked

The alternative is to get it from the event passed into the handleChange method:

event.target.checked

edited May 11, 2015 at 3:24

Pierre Arnaud

10.6k13 gold badges84 silver badges113 bronze badges

answered Oct 28, 2014 at 18:36

zbyte

3,8251 gold badge19 silver badges13 bronze badges

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

5 Comments

jdarling Over a year ago

handleChange is never getting called, doesn't matter if you click the checkbox or the label, handleChange doesn't get called :(.

zbyte Over a year ago

Try using defaultChecked={this.state.complete} instead of "checked" on your input.

jdarling Over a year ago

That was it... Searched forever looking and poking around. Will update question with complete working answer in case others run across this too.

nanobar Over a year ago

But why - having the same problem but you're supposed to use checked for controlled components :/

zbyte Over a year ago

setting checked means the state is managed outside the component. When the user clicks there is nothing to call handleChange as no state is updated. Instead you would need to listen for onClick and trigger a state update there.

Lin · Accepted Answer · 2019-01-30 14:32:01Z

55

It's better not to use refs in such cases. Use:

<input
    type="checkbox"
    checked={this.state.active}
    onClick={this.handleClick}
/>

There are some options:

`checked` vs `defaultChecked`

The former would respond to both state changes and clicks. The latter would ignore state changes.

`onClick` vs `onChange`

The former would always trigger on clicks. The latter would not trigger on clicks if checked attribute is present on input element.

edited Jan 30, 2019 at 14:32

answered Sep 18, 2018 at 12:38

Lin

1,13910 silver badges6 bronze badges

2 Comments

Ian Over a year ago

I'm using React 16.13.1 and you cannot provide a checked property without an onChange property. If I define both, and make the checked property responsive to inputs, then I get the desired behavior and onChange triggers every time I click on the box. So I think this answer has become outdated.

Mickey Over a year ago

This idea save my life of debugging

spencer.sm · Accepted Answer · 2019-11-21 21:20:13Z

26

If you have a handleChange function that looks like this:

handleChange = (e) => {
  this.setState({
    [e.target.name]: e.target.value,
  });
}

You can create a custom onChange function so that it acts like an text input would:

<input
  type="checkbox"
  name="check"
  checked={this.state.check}
  onChange={(e) => {
    this.handleChange({
      target: {
        name: e.target.name,
        value: e.target.checked,
      },
    });
  }}
/>

edited Nov 21, 2019 at 21:20

answered Sep 25, 2018 at 20:21

spencer.sm

20.8k10 gold badges86 silver badges98 bronze badges

3 Comments

Ardhi Over a year ago

isn't handleChange on input should be this.handleChange?

Haikel Fazzani Over a year ago

you made a little mistake -> [e.target.name]: e.target.checked

spencer.sm Over a year ago

@Haikel if you had a handleChange function that was only handling the checkbox input that'd be true, but if you notice in the second code block we're calling handleChange in an arrow function and setting target.value to e.target.checked (essentially creating a faux event). It was done this way so that the same handleChange function could work for text inputs as well since that's how they pass their value in change events.

akiespenc · Accepted Answer · 2018-02-09 12:05:11Z

In the scenario you would NOT like to use the onChange handler on the input DOM, you can use the onClick property as an alternative. The defaultChecked, the condition may leave a fixed state for v16 IINM.

 class CrossOutCheckbox extends Component {
      constructor(init){
          super(init);
          this.handleChange = this.handleChange.bind(this);
      }
      handleChange({target}){
          if (target.checked){
             target.removeAttribute('checked');
             target.parentNode.style.textDecoration = "";
          } else {
             target.setAttribute('checked', true);
             target.parentNode.style.textDecoration = "line-through";
          }
      }
      render(){
         return (
            <span>
              <label style={{textDecoration: this.props.complete?"line-through":""}}>
                 <input type="checkbox"
                        onClick={this.handleChange}
                        defaultChecked={this.props.complete}
                  />
              </label>
                {this.props.text}
            </span>
        )
    }
 }

I hope this helps someone in the future.

Pawel Gorczynski · Accepted Answer · 2020-05-17 20:26:02Z

13

In case someone is looking for a universal event handler the following code can be used more or less (assuming that name property is set for every input):

    this.handleInputChange = (e) => {
        item[e.target.name] = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    }

edited May 17, 2020 at 20:26

answered Apr 27, 2020 at 20:07

Pawel Gorczynski

1,3151 gold badge15 silver badges17 bronze badges

Comments

Mo. · Accepted Answer · 2019-09-02 20:46:36Z

3

onChange will not call handleChange on mobile when using defaultChecked. As an alternative you can can use onClick and onTouchEnd.

<input onClick={this.handleChange} onTouchEnd={this.handleChange} type="checkbox" defaultChecked={!!this.state.complete} />;

edited Sep 2, 2019 at 20:46

Mo.

27.6k36 gold badges167 silver badges235 bronze badges

answered Oct 8, 2018 at 6:05

tanner burton

1,1691 gold badge15 silver badges17 bronze badges

Comments

Devin Rhode · Accepted Answer · 2023-11-17 18:40:49Z

2

Here's React 18 docs: https://react.dev/reference/react-dom/components/input#my-checkbox-doesnt-update-when-i-click-on-it

// ✅ Good: controlled checkbox with onChange
<input type="checkbox" checked={something} onChange={e => setSomething(e.target.checked)} />

// 🔴 Bug: controlled checkbox with no onChange handler
<input type="checkbox" checked={something} />

// ✅ Good: uncontrolled checkbox with an initial value
<input type="checkbox" defaultChecked={something} />

answered Nov 17, 2023 at 18:40

Devin Rhode

25.7k8 gold badges69 silver badges84 bronze badges

Comments

Sakshi Nagpal · Accepted Answer · 2016-09-28 06:18:29Z

1

In material ui, state of checkbox can be fetched as

this.refs.complete.state.switched

answered Sep 28, 2016 at 6:18

Sakshi Nagpal

1,0437 silver badges16 bronze badges

Comments

HosseinAgha · Accepted Answer · 2023-05-17 05:47:04Z

0

For anyone encountering this questions in the future. My problem was referencing the input name instead of id in the htmlFor of the label.

So changing this:

<input type="checkbox" name="test" value="isGood" onChange={() => console.log('called')} />
<label htmlFor="test" >Is Good?</label>

to this

<input type="checkbox" name="test" id="test" value="isGood" onChange={() => console.log('called')} />
<label htmlFor="test" >goood</label>

Fixed the issue

answered May 17, 2023 at 5:47

HosseinAgha

8337 silver badges18 bronze badges

Collectives™ on Stack Overflow

React Checkbox not sending onChange

9 Answers 9

5 Comments

`checked` vs `defaultChecked`

`onClick` vs `onChange`

2 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

5 Comments

checked vs defaultChecked

onClick vs onChange

2 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

`checked` vs `defaultChecked`

`onClick` vs `onChange`