Perché la casella di controllo React onChange viene attivata per il rendering e quindi non quando si fa clic sulla casella?

Question

Ho letto i documenti di React e ho ridotto il problema a un caso semplice, ma non riesco ancora a capire cosa sto facendo male.

JSFiddle: https://jsfiddle.net/justin_levinson/pyn7fLq5/ o scritta sotto:

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); 
    } 
}); 

Al caricamento della pagina, ho un 'controllo' nel registro seguito da 'undefined' per l'evento, allora non si attiva nuovamente successiva scatti. Ho provato questo con sia onClick e onChange sia creando un controllo (controllato = {true}) invece che incontrollato (defaultChecked = {true}) sopra.

Grazie!

Answer 1

Perché stai già chiamando il metodo su render.

cambiamento onChange={this.handleCheck()}-onChange={this.handleCheck}

Answer 2

Per chiunque leggendo questo in futuro (come me), si può anche risolvere questo formattando come onClick={(e) => this.handleCheck(parameter)} se è necessario passare in un parametro.