次の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
メソッドに到達しません。
なぜそうなのですか?
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>
欠けていることが1つあります。
gotEmail
にはpreventDefault
があるはずなので、ユーザーが「Enter」を押すと、ページはリロードされません。
gotEmail(event){
event.preventDefault();
// code you want to do
}
バージョン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>
次のスニペットを使用して、reactstrapで成功しました。
<Button onClick={this.onSubmit}>Login</Button>