無法提交表單反應，引導

Question

我有以下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方法。

這是爲什麼？

Answer 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> 

Answer 2

有一兩件事失蹤，我想。

在gotEmail，應該有一個preventDefault，因此如果用戶按下「Enter」，頁面將不會重新加載：

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

Answer 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>