web-dev-qa-db-ja.com

フォームreact-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メソッドに到達しません。

なぜそうなのですか？

twitter-bootstrapreactjsreact-bootstrap
18
octavian

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>
25
madox2

欠けていることが1つあります。

gotEmailにはpreventDefaultがあるはずなので、ユーザーが「Enter」を押すと、ページはリロードされません。

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

バージョン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>
5
Kevin Lee

次のスニペットを使用して、reactstrapで成功しました。

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