Невозможно отправить форму response-bootstrap

У меня есть следующий 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 метода.

Почему так?


reactjs twitter-bootstrap react-bootstrap
person octavian    schedule 15.05.2016    source источник

Ответы (4)


arrow_upward
33
arrow_downward

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>
person madox2    schedule 15.05.2016
comment
Просто любопытно, что толку от role = form? Например, у меня только что есть ‹FormGroup›, и он работает - person Ycon; 30.10.2016
comment
Итак, если я использую ‹Форма горизонтальной›, как сказано в документе (react-bootstrap .github.io / components.html #forms-horizontal), нужно ли мне оборачивать это другой формой, поскольку в моей DOM нет свойства onSubmit и есть 2 формы? - person migueloop; 28.01.2017
comment
@migueloop с версии 0.30.2, вы можете просто использовать ‹Форма горизонтальная onSubmit = {this.gotEmail}› - person Kevin Lee; 12.06.2017

arrow_upward
17
arrow_downward

Думаю, чего-то не хватает.

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

gotEmail(event){ 
  event.preventDefault();
  // code you want to do
}
person ajamardo    schedule 05.01.2017

arrow_upward
9
arrow_downward

Начиная с версии 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>
person Kevin Lee    schedule 12.06.2017

arrow_upward
3
arrow_downward

Мне удалось использовать responsestrap, используя следующий фрагмент:

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

person codeislife    schedule 20.04.2018