コンポーネントをリアクションすると、onClickイベントがトリガーされますか？

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

このコンポーネントをレンダリングすると、ボタンをクリックせずにconsole.log呼び出しが実行されます。

ボタンをクリックしたときにメソッドを呼び出すだけで、実際には複雑なことはありません。

なぜですか？

Answer 1

あなたは

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

またはあなたがconsole.log()返すので、onClickundefinedに渡しているあなたの例では

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

ES2015矢印機能を使用しない場合に機能するようにonClick参照に渡す必要がありますundefined関数への参照ではなく、{}のJSXコンテキストには、JSコードを渡すことができますあなたは実行したい。

Example

Answer 2

は、それはあなたがcustomerId用クロージャとしてaddEmailButtonを使用しようとしているように見えますが、それはcustomerId引数ではなく、ボタンのレンダリングを必要とするハンドラだから、それは助けにはなりません。

必要なのはbindにcustomerId引数でクリックイベントである：

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

それとも、あなたが代わりにselfとbindの矢印の機能を使用することができますES6を使用して：

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