反应表单组件 onSubmit 处理程序不起作用

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 组件。 this 为 null 的事实令我感到惊讶，因为我使用的逻辑/代码与 official React documentation 建议的非常相似。

如果能帮助我弄清楚为什么 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) 或箭头函数 =>.

Answer 2

您需要将button 或input 与type="submit" 一起使用

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

或者

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

这发生在我的提交处理程序中，它刚刚将一个新位置推送到历史记录中。提交我的表单会刷新页面，让我留在旧位置。我在提交处理程序的开头使用event.preventDefault() 修复了这个问题。

Answer 6

如果您使用的是功能组件，请确保您的按钮类型为“提交”而不是“按钮”。这就是我做错了！