React: это значение null в обработчике событий

У меня есть компонент LoginForm. Я хочу проверить перед отправкой, что установлены как loginName, так и password. Я пробовал с этим кодом (много пропущено):

class LoginForm extends Component {

  constructor() {
    super();

    this.state = {
      error: "",

      loginName: "",
      password: "",
      remember: true
    };
  }


  submit(e) {
    e.preventDefault();
    if(!this.state.loginName || !this.state.password) { //this is null
      this.setState({ error: "Fill in both fields" });
    } else {
      console.log("submitting form");
    }
  }

  render() {
    return (
      <div className="col-xs-12 col-sm-6 col-md-4">
        <form className="login" onSubmit={this.submit}>
          <button type="submit" className="btn btn-default">Sign in</button>
        </form>
      </div>
    );
  }
}

export default LoginForm;

однако, я получаю a TypeError в обработчике события, говоря, что this имеет значение null.

Что мне делать?

Ответ 1

Вам нужно установить this для метода submit, потому что теперь this есть undefined, для этой операции вы можете использовать .bind

onSubmit={ this.submit.bind(this) }

Example

или вы можете использовать функцию стрелки

onSubmit={ (e) => this.submit(e) }

Example

Ответ 2

Реагирование было обязательным для этого для вас раньше. Но теперь он исчез, и вы должны привязать его самостоятельно или сделать обертку, как

onSubmit={() => this.submit()}

Ответ 3

Для тех, кто использует Babel, вы можете использовать оператор привязки с transform-function-bind:

onSubmit={::this.submit}

который является синтаксическим сахаром для:

onSubmit={this.submit.bind(this)}