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。 this为空的事实对我来说是令人惊讶的，因为我使用了与official React documentation建议的非常相似的逻辑/代码。

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

Answer 1

将qDebug() << QImageWriter::supportedImageFormats();与ES2015 classes一起使用时，应将React设置为事件处理程序

this

Example

No Autobinding

方法遵循与常规ES6类相同的语义，这意味着   他们不会自动将其绑定到实例。你必须这样做   明确使用.bind（this）或arrow functions =＆gt;。

Answer 2

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

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

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

Answer 3

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

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

Answer 4

您需要使用按钮类型提交或输入类型提交

Injectable

或

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

Answer 5

这发生在我身上，一个提交处理程序只是将一个新位置推送到历史记录中。提交我的表单会刷新页面，让我留在旧位置。我在提交处理程序开始时使用 event.preventDefault() 解决了这个问题。

React Form Component onSubmit Handler不工作

5 个答案: