React: input type="checkbox" onChange not triggered

Question

Can anyone tell me why handleChange isn't triggered when I click any of the checkboxes? The checkboxes is rendered as I want with the expected value, but the click handler is not triggered.

 37   var AutocompleteFromCheckboxes = React.createClass({
 38     handleChange: function(e) {
 39       console.log('hi');
 40       return 1;
 41     },
 42     render: function() {
 43       var autocompleteFrom = this.props.autocomplete_from.map(function(value) {
 44         return (
 45           <label for={value}>
 46             <input type="checkbox" name={value} value="{value}"
 47               onChange={this.handleChange}
 48               ref="autocomplete-from"/>
 49             {value}
 50           </label>
 51         );
 52       });
 53       return (
 54         <div className="autocomplete-from">
 55           {autocompleteFrom}
 56         </div>
 57       );
 58     }
 59   });

Note unrelatedly that to get a for attribute in HTML, you need to use htmlFor in JSX. — chirlu
– chirlu, Commented Apr 7, 2015 at 18:02

Community · Accepted Answer · 2017-05-23 11:43:27Z

1

In your code the anonymous function runs with the wrong context: as soon as you don't set it explicitly it's being set to undefined.

It means that this is undefined hence this.handleChange should throw an exception (not sure why you haven't checked the console for that. And if you had - why you didn't mention it).

To solve the problem you may pass the context explicitly as the second argument for the Array.prototype.map function call:

var autocompleteFrom = this.props.autocomplete_from.map(function(value) {
    // ...
}, this);

And as soon as you solve this particular issue and ready to dive into the details on how this works in JS, please follow this amazing answer.

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Apr 7, 2015 at 9:15

zerkms

256k73 gold badges447 silver badges551 bronze badges

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

9 Comments

Jonny Buchanan Over a year ago

In addition to @zerkms answer, this is a good reason to use strict mode - if you'd had 'use strict'; at the top of the module containing this component, you'd have got a this is undefined error pointing to the this.handleChange line.

Brigand Over a year ago

Or a good reason to use ES6 with arrow functions, and never worry about this scoping again *brushes es5 off hands*. Really though, it's just a compiler flag on jstransform (jsx/reactify/jsx-loader), go ahead and flip it.

Alex McMillan Over a year ago

Without 'use strict';, this will be window, not undefined.

zerkms Over a year ago

@AlexMcMillan yep, but then this.handleChange will be undefined. Not much difference (if you know how to use debugger).

Alex McMillan Over a year ago

@zerkms big difference... object.undefinedProperty will pass undefined, making it a silent error - hard to find without going through the code and determining if object is what you expected it to be. undefined.property will throw an error, immediately alerting you to the problem.

|

Collectives™ on Stack Overflow

React: input type="checkbox" onChange not triggered

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related