Question

我的react.js应用程序中没有触发表单onSubmit方法（_updateThing）。
源代码如下所示我认为问题很简单，但我花了很多时间检查它，无法解决它。请帮助我。
我的代码出了什么问题：

export default React.createClass({
  displayName: 'ThingContainer',
  statics: {
    load: function (context) {
      return ThingActions.getData(context);
    }
  },
  mixins: [ContextMixin, MaterialRebindMixin],
  getInitialState() {
    return getThings();
  },
  _updateThing(e) {
    alert(1);
    e.preventDefault();
  },
  _setChangedText(event) {
    alert('change');
  },
   render() {
    return (
        <div>
          <div>
            <div>
              <h2>Title</h2>
            </div>
            <form  onSubmit={this._updateThing}>
              <div >
                <Label htmlFor="changeQuantity" text="" />
                <Input id="changeQuantity" name="changeQuantity" type="text" onChange={this._setChangedText}  />
              </div>
              <div className="form-footer">
                <div style={{float: 'right'}}>
                  <input type="submit" value="submit" />
                </div>
              </div>
            </form>
          </div>
        </div>
    );
  }
});

我将“form onSubmit = {this._updateThing}”更改为“form onSubmit = {this._updateThing.bind（this）}”，但没有任何改变。
我还使用Chrome开发者控制台检查html源代码，onSubmit方法（_updateThing）未显示在html源代码中。
Capture
谢谢你的进步。

Answer 1

问题是this的上下文没有被保留。如果您使用React.createClass，this会自动绑定（source），如果您是React dev转移到ES6类，可能会引发循环。使用ES6类构造函数语法时，情况并非如此，您必须在适当时绑定自己的方法。最常见的方法是在JSX中bind(this)。

例如，而不是
onSubmit={this._updateThing}

尝试
onSubmit={this._updateThing.bind(this)}

Answer 2

好的，我找到了原因！我正在使用服务器端呈现（React.renderToString）来呈现组件的HTML。因此，组件仅被渲染，但未被安装，因此不会调用与安装相关的任何方法。

详情： https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring

form onSubmit方法在react.js中不起作用

2 个答案: