Reagieren onChange-Methode funktioniert nicht in react_on_rails

Question

Ich versuche, eine Beispielanwendung basierend auf react_on_rails gem zu erstellen. In meinem Reaction Code reagieren die inbuild Funktionen wie onChange oder onSubmit nicht.

Meine HelloWorldWidget Komponente sieht so aus.

... 
constructor(props, context) { 
    super(props, context); 
    _.bindAll(this, 'handleChange'); 
} 

handleChange(e) { 
    const name = e.target.value; 
    console.log(name); 
    //this.props.updateName(name); 
} 

render() { 
    const { name } = this.props; 
    return (
    <div className="container"> 
     <h3> 
     Hello, {name}! 
     </h3> 
     <input className="form-control input-sm col-sm-4" type="text" onChange={this.handleChange}/> 
    </div> 
); 
} 

Auch wenn ich Server-Seite vorrendern meiner Komponente in meiner views/hello_world/index.html.erb Datei deaktivieren dann die Komponente rendert nicht auf UI.

<%= react_component("HelloWorldApp", props: @hello_world_props , prerender: false) %> 

Github Repo: react-on-rails-sample-app

Answer 1

Versuchen Sie, Pfeil Funktionen wie folgt zu verwenden:

onChange={(e) => this.handleChange(e)} 

Answer 2

Ich bin nicht sicher, wo _.bindAll Methode herkommt, aber die orthodoxe Weise der Bindung Handler ist mit diesem Syntax:
this.handleChange = this.handleChange.bind(this);

Wenn Sie Pfeilfunktion verwenden, müssen Sie nicht binden Sie es an die class;

handleChange = (e) => { 
    const name = e.target.value; 
    console.log(name); 
    //this.props.updateName(name); 
}