Не удается отправить форму "реакция-бутстрап"

У меня есть следующий компонент react-bootstrap:

        <FormGroup onSubmit={this.gotEmail} role="form">
          <FormControl type="text" className="form-control"/>
          <Button className="btn btn-primary btn-large centerButton" type="submit">Send</Button>
        </FormGroup>

Я бы хотел, чтобы форма была отправлена, когда я нажимаю кнопку "Отправить".

Однако, если я нажму кнопку, управление не достигнет метода this.gotEmail.

Почему это так?

Ответы

Ответ 1

FormGroup не предоставляет на отправке событие. Вы можете обернуть его элементом form и присоединить к нему обработчик событий:

<form onSubmit={this.gotEmail}>
  <FormGroup role="form">
    <FormControl type="text" className="form-control"/>
    <Button className="btn btn-primary btn-large centerButton" type="submit">Send</Button>
  </FormGroup>
</form>

Ответ 2

Я думаю, что одна вещь отсутствует.

В gotEmail должен быть preventDefault, поэтому, если пользователь нажимает 'enter', страница не перезагружается:

gotEmail(event){ 
  event.preventDefault();
  // code you want to do
}

Ответ 3

Начиная с версии 0.30.2, вы можете обернуть ее в <Form>, которая поддерживает свойство onSubmit:

<Form onSubmit={this.gotEmail}>
  <FormGroup role="form">
  <FormControl type="text" className="form-control"/>
  <Button className="btn btn-primary btn-large centerButton" 
  type="submit">Send</Button>
  </FormGroup>
</Form>

Ответ 4

Я успешно справился с реакцией на использование следующего фрагмента:

<Button onClick={this.onSubmit}>Login</Button>