0

我正在尝试创建一个基于react_on_railsgem 的示例应用程序。在我的反应代码中反应 inbuild 功能喜欢onChange或onSubmit不工作。

我的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

4

2 回答 2

1

我不确定_.bindAll方法来自哪里，但绑定处理程序的正统方式是使用以下语法：
this.handleChange = this.handleChange.bind(this);

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

handleChange = (e) => {
  const name = e.target.value;
  console.log(name);
  //this.props.updateName(name);
}
于 2017-08-24T09:49:36.447 回答
0

尝试使用这样的箭头函数：

onChange={(e) => this.handleChange(e)}
于 2017-08-24T09:37:54.070 回答