reactjsリンクがクリックされたときに警告メッセージを表示します。

Question

次のコードは、.Map機能でルールがバインドされる際の警告メッセージを示しています。私はこれが起こることを望んでいない。代わりに、どのようにして各リンクにonClickをバインドできますか？ユーザーがリンクをクリックするとメッセージが表示されますか？私はそれが.Mapコードのどこかに.bind（this）を置くことと関係していると思うが、それを理解することはできない。助けてくれてありがとう！

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