Ereignis ist beim Erstellen dynamischer Steuerelemente nicht bindend

Question

Wenn ich ein Ereignis mit dem ersten Code-Snippet hinzufüge, wird das Ereignis ausgelöst. Aber wenn ich dasselbe mit einer Variablen mache, feuert das Ereignis nicht. Kann mir jemand helfen?

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

gleichen Code mit variabler:

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

Erstes eine und der zweite Durchschleifen werden und das Hinzufügen der Textfelder. Nur mit der Variable kann ich den Code verallgemeinern. Ich habe die Schleife aus dem ersten Code-Snippet entfernt, um die Komplexität zu reduzieren.

Answer 1

Wenn Sie eine Liste von Eingabeelementen rendern müssen, ist es besser, ein einfaches Element zu erstellen und es in Parent abzubilden. Lesen Sie reagieren Dokumentation über dynamic children

jssfidle:

Codebeispiel:

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

wie ein Zauber funktioniert.