創建動態控件時事件未綁定

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

工作就像一個魅力。