React Form组件onSubmit处理程序不起作用

  • Z时代
  • 2024-01-10
  • 分类：问答

我有以下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。这让我感到惊讶，因为我期望thisReact组件的价值。thisnull

的事实令我感到惊讶，因为我使用的是非常相似的逻辑/代码，如官方的React文档所建议的那样。

我将不胜感激，帮助您弄清为什么thisReact组件不是预期的，以及如何修复代码。

回答：

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）或箭头函数=>。

以上是 React Form组件onSubmit处理程序不起作用 的全部内容， 来源链接： utcz.com/qa/419475.html

回到顶部