reactjs在單擊鏈接時顯示警告消息

Question

以下代碼顯示警報消息，因爲規則正在綁定到.Map函數中。我不希望發生這種情況。相反，如何將onClick綁定到每個鏈接，以便當用戶單擊鏈接後郵件將顯示？我認爲它與將.bind（this）放置在.Map代碼中的某個地方有關，但無法弄清楚。謝謝你的幫助！

const RuleResults = React.createClass({ 
showMessage: function(rule) { 
    if (rule.ShowMessageToUser == true) { 
     alert(rule.MessageToUser); 
    } 
}, 
render: function() { 

        var rules = this.props.businessRules.map((rule) => { 
      return (
       <tr> 
     <td> 
     <a href={rule.HREF} onClick={this.showMessage(rule)} target='_blank'>{rule.Name}</a> 
     </td> 
     </tr> 
      ); 
     }) ; 
return ( 
      <div> 
      <table> 
      <thead> 
      <tr> 
      <th>Name</th> 
      </tr> 
      </thead> 
      <tbody> 
      {rules} 
      </tbody> 
      </table> 
       </div> 
     ); 

    } 
}); 

Answer 1

您應該傳遞給onClick引用函數而不是調用它。要做到這一點，你可以使用.bind或arrow function

1. <a href={rule.HREF} onClick={ this.showMessage.bind(this, rule) }>..</a>
2. <a href={rule.HREF} onClick={() => this.showMessage(rule) }>..</a>

Example