创建动态控件时事件未绑定

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

工作就像一个魅力。