ReactのonClickメソッドでパラメータをとるボタンコンポーネントを作成するにはどうすればよいですか？

Question

さて、私はこれで2日間働いており、何か助けが必要です。以前私がプレイしていたゲームのための略奪ログプログラムを作ったので、今はWebappにしたいと思っています。私はReact JSを使ってアプリケーションを構築しています。

私は、onClick関数を含むボタンコンポーネントを作成し、パラメータを取る必要があります。私のアプリケーションは、forループを使って、選択されたモンスターのルーツテーブルの長さに等しいボタンを表示します（必要なボタンの数だけが作成されます）。これらのボタンには、valueパラメータをとるonClickメソッドが必要です（値が重要な場合は値は配列のインデックスです。配列にはlootテーブルが格納されています）。

{this.props.name}と{this.props.value}を使って渡す必要がある値を参照してボタン名を生成できると思っていました。

var Button = React.createClass({ 
    render: function() { 
     return <button type="button" onClick={this.onClick.bind(this, 
     {this.props.id})}>{this.props.name}</button> 
    }, 

    onClick: function(value) { 
     alert(value); 
    } 
}); 

React.render((<Button name="test" id={1} />), 
document.getElementById('example')); 

テストの目的で、ボタンは単にクラス 'example'のdivで描画されます。

私はこのようなものの例を見つけようとしましたが、自分のwebappのために必要なパラメータを渡すボタンを動的に作成したい人はいません。何か助けてくれてありがとう！

Answer 1

見に戻ってイベントを渡すための責任を負わなければなりません書き込み：

return <button type="button" onClick={this.onClick.bind(this, 
     {this.props.id})}>{this.props.name}</button> 

onClickバインディングにエラーがあります。それは次のようになります。

return <button type="button" onClick={this.onClick.bind(this, 
     this.props.id)}>{this.props.name}</button> 

this.props.id

Answer 2

それらを発生させながらあなただけの各ボタンのonClickのための閉鎖を作成することができます。例として

const Button = ({ name, onClick }) => { 
    return (
     <button onClick={onClick}>{ name }</button> 
    ) 
} 

const List =() => { 
    return (
     <div> 
      { [0,1,2,3,4,5,6,7,8,9].map((value, index) => { 
       const onClick =() => { /* use index here */ } 
       return <Button onClick={onClick} name={value}/> 
      }) } 
     </div> 
    ) 
} 

を。私はReact.createClassの代わりにES6/JSXを使用していることを覚えておいてください。

それに、onClickロジックを処理するための責任があるとボタンの意味がありません - それだけで、関連する「加入者」次のコードをあなたの