In React, perché devo associare una funzione onClick piuttosto che chiamarla?

Question

In this tutorial utilizza una funzione onClick con bind.

<Card onClick={that.deletePerson.bind(null, person)} name={person.name}></Card> 

Quando rimuovo il bind come questo

<Card onClick={that.deletePerson(person)} name={person.name}></Card> 

ottengo un errore

Uncaught Error: Invariant Violation: setState(...): Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

so cosa bind fa, ma perché è necessario qui? onClick non chiama direttamente la funzione?

(codice è in questo JSbin: https://jsbin.com/gutiwu/1/edit)

Answer 1

Sta usando il bind in modo che il metodo deletePerson ottiene il corretto person argomento.

Poiché il componente Card non riceve un oggetto completo Person, questo gli consente di identificare la carta di quella persona effettivamente cliccata.

Nell'esempio in cui è stato rimosso il binding, onClick={that.deletePerson(person)} sta attualmente valutando la funzione that.deletePerson(person) e l'impostazione come onClick. Il metodo deletePerson cambia lo stato del componente, che è quello che sta dicendo il messaggio di errore. (Non puoi cambiare stato durante un rendering).

Una soluzione migliore potrebbe essere quella di passare l'ID in Card e restituirlo al componente app su un clic di eliminazione.

var Card = React.createClass({ 
    handleClick: function() { 
    this.props.onClick(this.props.id) 
    } 
    render: function() { 
     return (
      <div> 
       <h2>{this.props.name}</h2> 
       <img src={this.props.avatar} alt=""/> 
       <div></div> 
       <button onClick={this.handleClick}>Delete Me</button> 
      </div> 
    ) 
    } 
}) 

var App = React.createClass({ 

    deletePerson: function (id) { 
    //Delete person using id 
    }, 

    render: function() { 
    var that = this; 
    return (
     <div> 
      {this.state.people.map(function (person) { 
       return (
        <Card onClick={that.deletePerson} name={person.name} avatar={person.avatar} id={person.id}></Card> 
       ) 
      }, this)} 
      </div> 
    ) 
    } 
})