Reagieren beim Rendern einer Komponente löst das Ereignis onClick aus?

Question

var CustomerTable = React.createClass({  
    addEmailButton: function(customerId) { 
    console.log(customerId); 
    return (
     <button onClick={console.log("clicked", customerId)}>X</button> 
    ) 
    }, 

    render: function() { 
    var self = this; 
    return (
     <div> 
     <table> 
      <thead> 
      <tr> 
       <th>Actions</th> 
      </tr> 
      </thead> 
      <tbody> 
      { 
       this.state.customers.map(function(customer, i) { 
       return (
        <tr key={i}> 
        <td>{self.addEmailButton(customer['id'])}</td> 
        </tr> 
       ) 
       }) 
      } 
      </tbody> 
     </table> 
     </div> 
    ) 
    } 
}); 

Wenn diese Komponente wiedergegeben wird, wird der Aufruf console.log ausgeführt, ohne auf eine der Schaltflächen zu klicken.

Ich möchte nur eine Methode aufrufen, wenn eine Schaltfläche geklickt wird, nichts wirklich kompliziert.

Warum ist das?

Answer 1

Sie sollten onClick Verweis übergeben

<button onClick={() => console.log("clicked", customerId)}>X</button> 

funktionieren oder wenn Sie nicht ES2015 Pfeil Funktion

<button onClick={function() { console.log("clicked", customerId) } }>X</button> 

in Ihrem Beispiel verwenden Sie vorbei an Sie onClickundefined, weil console.log() kehrt undefined , aber nicht in Bezug auf die Funktion., {} in JSX Kontext bedeutet, dass Sie JS-Code, die yo übergeben können Du willst ausführen.

Example

Answer 2

Es sieht aus wie Sie versuchen, addEmailButton als Verschluss für die customerId zu verwenden, aber es hilft nicht, weil es der Handler ist, der das customerId Argument braucht, nicht die Wiedergabe der Taste.

Alles, was Sie brauchen, ist das Click-Ereignis mit dem customerId Argument bind:

var CustomerTable = React.createClass({  
    handleClick: function(customerId, event) { 
    console.log("clicked", customerId); 
    }, 
    render: function() { 
    var self = this; 
    return (
     <...> 
     { 
      this.state.customers.map(function(customer, i) { 
      return (
       <tr key={i}> 
       <td> 
        <button onClick={self.handleClick.bind(self, customer['id'])}>X</button> 
       </td> 
       </tr> 
      ) 
      }) 
     } 
     <...> 
    ) 
    } 
}); 

Oder mit ES6 Sie Pfeil-Funktionen anstelle von self und bind verwenden können:

{ 
    this.state.customers.map((customer, i) => { 
    return (
     <tr key={i}> 
     <td> 
      <button onClick={(e) => this.handleClick(customer['id'])}>X</button> 
     </td> 
     </tr> 
    ) 
    }) 
}