React Form Component onSubmit Handler不工作

Question

我有以下React组件:

class Form extends React.Component {
  handleSubmit(e) {
    e.preventDefault();

    let loginInput = ReactDOM.findDOMNode(this.refs.login);

    // change Main component's state
    this.props.addCard(loginInput.value);

    // reset the form
    loginInput.value = '';
  }

  render() {
    return(
      <form onSubmit={this.handleSubmit}>
        <input placeholder="githug login" ref="login" />
        <button>Add Login</button>
      </form>
    );
  }
}

如您所见,我希望在handleSubmit提交表单时调用该函数.我通过将函数添加到onSubmit处理程序来表明这一点.

该函数正在正确的时间调用.但是,该this函数的值是null.这对我来说是令人惊讶的,因为我预计它的价值this是React Component.thisnull 的事实对我来说是令人惊讶的,因为我正在使用官方React文档建议的非常相似的逻辑/代码.

我很感激帮助找出为什么this不是React组件,如预期的那样,以及如何修复代码.

Answer 1

当您使用时React,ES2015 classes您应该设置this为事件处理程序

class Form extends React.Component {
  constructor(props) {
     super(props);
     this.handleSubmit = this.handleSubmit.bind(this);
  }    

  handleSubmit(e) {
    e.preventDefault();

    let loginInput = this.refs.login;
    this.props.addCard(loginInput.value);
    loginInput.value = '';
  }

  render() {
    return(
      <form onSubmit={ this.handleSubmit }>
        <input placeholder="githug login" ref="login" />
        <button>Add Login</button>
      </form>
    );
  }
}

Example

No Autobinding

方法遵循与常规ES6类相同的语义,这意味着它们不会自动将其绑定到实例.你必须明确地使用.bind(this)或arrow functions =>.

Answer 2

一条明显的信息：不要忘记将您的按钮包含在<form>. 我被卡住了一段时间，直到我发现我将提交按钮放在了表单之外，如下所示：

  <form onSubmit={ this.handleSubmit }>
    <input placeholder="githug login" ref="login" />
  </form>            
  <button type="submit">Add Login</button>

因此 onSubmit 事件没有被调用，永远不会被调用。

Answer 3

您需要使用button与type="submit"或input有type="submit"

<button type="submit">Submit</button>

要么

<input type="submit" value="Submit />

Answer 4

对我来说，这是因为表单没有action设置属性。

<form onSubmit={this.handleSubmit} action="#">
    <input placeholder="githug login" ref="login" />
    <button>Add Login</button>
</form>