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

像魅力一样工作。

创建动态控件时，事件不具有约束力

1 个答案: