reactjs - React 表单组件 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 组件，以及如何修复代码，使其成为 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

Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind this to the instance. You'll have to explicitly use .bind(this) or arrow functions =>.