阵营的onChange方法react_on_rails

我试图创建一个基于react_on_rails宝石一个示例应用程序无法正常工作。在我反应过来的代码反应inbuild功能像onChange或onSubmit不工作。阵营的onChange方法react_on_rails

我HelloWorldWidget组件看起来是这样的。

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

另外，如果我禁用服务器端在我views/hello_world/index.html.erb文件我的组件的预渲染，则该组件没有渲染的UI。

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

GitHub库：react-on-rails-sample-app

来源

2017-08-24 sahil solanki

你得到错误？什么是'_.bindAll（this，'handleChange'）;'？ –

没有错误。它是lodash函数，它将我们所有的函数绑定到'this'上下文中。 –

尝试使用箭头功能是这样的：

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

来源

2017-08-24 09:37:54 emma93

我以前尝试过，但没有工作。这个问题可能是因为服务器端渲染是真的，但我不确定到底发生了什么。 –

我不知道在哪里_.bindAll方法的来源，但装订处理器的正统的方式与此语法：
this.handleChange = this.handleChange.bind(this);

如果使用箭头功能，则不需要将它绑定到class;

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

来源

2017-08-24 09:49:36

'_.bindAll'是多种功能结合在一起的lodash功能。我试着用'this.handleChange = this.handleChange.bind（this）;'但是它是一样的，没有登录控制台。 –

阵营的onChange方法react_on_rails

回答

相关问题