Обработчик onSubmit компонента React Form не работает

у меня есть следующий компонент 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 is null is удивительно для меня, потому что я использую очень похожую логику / код, как предлагает официальная документация React.

буду признателен за помощь в выяснении, почему this не является компонентом React, как ожидалось, и как исправить код, чтобы он был.

6
reactjs

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) или функции стрелки =>.

14