陣營的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

回答

相關問題