Why is the "Sound Response" checkbox selected for "Change Handler Handler" when rendering, and then not when I click on the button?

Question

Read the React docs and cast the problem aside for a simple case, but still can't figure out 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 journal, followed by “undefined” for the event, after which it does not fire on subsequent clicks. Try this with both onClick and onChange, and also create a managed (checked = {true}) instead of an uncontrolled (defaultChecked = {true}) above.

Thanks!

Answer 1

Because you are already calling the method on the render.

change onChange={this.handleCheck()} to onChange={this.handleCheck}

Answer 2

For those who read this in the future (for example, me), you can also solve this by formatting, for example, onClick={(e) => this.handleCheck(parameter)} if you need to pass a parameter.