Nie można wysłać formularza reagować-bootstrap

Question

Mam następujący react-bootstrap komponent:

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

chciałbym formularz należy złożyć po kliknięciu przycisku „Wyślij”.

Jeśli jednak kliknę przycisk, sterowanie nie osiągnie metody this.gotEmail.

Dlaczego tak się dzieje?

Answer 1

FormGroup nie przekazuje zdarzenia. Można owinąć ją form elementu i dołączyć do niego obsługi zdarzeń:

<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

Jest jedna rzecz, brakuje, myślę.

W gotEmail, nie powinno być preventDefault, więc jeśli użytkownik naciśnie „enter”, strona nie będzie przeładować:

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

Answer 3

Począwszy od wersji 0.30.2, można owinąć go w <Form> , który obsługuje właściwość 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>