Have read through the React docs and boiled the problem down to a simple case, still can't quite understand what I'm doing wrong.
JSFiddle: https://jsfiddle.net/justin_levinson/pyn7fLq5/ or written below:
var TestForm = React.createClass({
render : function() {
return (
<div>
<p>Test Form</p>
<form>
<TestBox />
</form>
</div>
)
}
});
var TestBox = React.createClass({
render : function() {
return (<input type="checkbox" name={"testbox"} defaultChecked={true} onChange={this.handleCheck()}/>)
},
handleCheck : function(event) {
console.log("check");
console.log(event);
}
});
When the page loads, I get a 'check' in the log followed by 'undefined' for the event, then it doesn't fire again on subsequent clicks. Have tried this with both onClick and onChange as well as creating a controlled (checked={true}) instead of the uncontrolled (defaultChecked={true}) above.
Thanks!
Because you're already calling the method on render.
change onChange={this.handleCheck()}
to onChange={this.handleCheck}
For anyone reading this in the future (like me), you can also solve this by formatting like onClick={(e) => this.handleCheck(parameter)}
if you need to pass in a parameter.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With