動的コントロールの作成中にイベントがバインドされていません

Question

最初のコードスニペットを使用してイベントを追加すると、イベントが発生しています。しかし、私が変数を使って同じことをすると、イベントは発生しません/バインディングです。誰も私を助けることができますか？

var ProductTable = React.createClass({ 
    ChangeSearch : function(event){console.log("Text changed");}, 
    render: function() { 
     return (<input type="text"onChange= {this.ChangeSearch} />); 
    } 
}); 

変数と同じコード：

var ProductTable = React.createClass({ 
    var headerFilters =[]; 
    ChangeSearch : function(event){console.log("Text changed");}, 

    render: function() { 
     headerFilters.push(<th><input type="text" onChange={this.ChangeSearch} /></th>);  
     return ({headerFilters}); 
    } 
}); 

まず一方ともう一つはをループとテキストボックスを追加しています。変数を使うだけで、私はコードを一般化することができます。複雑さを軽減するために、最初のコードスニペットからループを削除しました。

Answer 1

入力要素のリストをレンダリングして、単純な要素を作成し、それをParentにマップする必要がある場合は、ドキュメントを読む反応についてdynamic children

jssfidle:

コードサンプル：

var InputTextElement = React.createClass({ 
    changeHandler: function(event) { 
     console.log('text.changed' + event.target.value) 
    }, 
    render: function() { 
     return (
      <input type="text" name={this.props.name} onChange={this.changeHandler} /> 
     ) 
    } 
}) 

var ProductTable = React.createClass({ 

render: function() { 
    var headerFilters =[{id: 1, name: "test"}, {id:2, name: "another"}]; 

    return (
     <div> 
     { headerFilters.map(function(data) { 
      return <InputTextElement key={data.id} name={data.name} />; 
     })} 
     </div> 
    ); 
} 
}); 
setTimeout(function() { 
    ReactDOM.render(<ProductTable /> 
    , document.getElementById('element')) 
} ,700); 

が魅力のように働いて。