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

IT技术 reactjs
2021-05-25 17:06:13

我有以下 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。这让我感到惊讶，因为我期望 的valuethis成为 React 组件。thisnull的事实让我感到惊讶，因为我使用的逻辑/代码与官方 React 文档所建议的非常相似。

我很感激帮助弄清楚为什么thisReact 组件不是，如预期的那样，以及如何修复代码以使其成为。

4个回答

当你使用ReactwithES2015 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 类相同的语义，这意味着它们不会自动将 this 绑定到实例。您必须明确使用 .bind(this) 或箭头函数 =>。

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

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

或者

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

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

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

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

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

<form onSubmit={this.handleSubmit} action="#">
    <input placeholder="githug login" ref="login" />
    <button>Add Login</button>
</form>
其它你可能感兴趣的问题
上一篇如何将时刻日期转换为字符串并删除时刻对象 下一篇Reactjs如何在map函数中使用ref？