React bir bileşen oluşturma onClick olayını tetikler?

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

Bu bileşen oluşturulduğunda, düğmelerden herhangi birine basmadan, konsol.log çağrısı yürütülür.

Sadece bir düğme tıklandığında bir yöntem aramak istiyorum, gerçekten karmaşık bir şey yok.

Neden? Eğer ES2015 ok fonksiyonu

sizin örnekte

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

Eğer onClickundefined geçirerek, console.log() çünkü döner undefined kullanmıyorsanız

Answer 1

Sen

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

işlev onClick referansa geçmesi veya gerektiği Ancak, JSX bağlamında {} bağlamına başvuru atıfta bulunmazsınız. yürütmek istiyorum.

Example

Answer 2

Size customerId için bir kapak olarak addEmailButton kullanmaya çalışıyorsanız gibi görünüyor, ama customerId argüman değil, düğmenin render ihtiyacı işleyicisi çünkü o yardımcı olmuyor. ES6 yerine self ve bind ok fonksiyonlarını kullanabilirsiniz kullanarak, Ya

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

:

Tüm ihtiyacınız customerId bağımsız değişkenle click olayını bind etmektir

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