Kann nicht Form reagieren-Bootstrap

Question

einreichen Ich habe folgende react-bootstrap Komponente:

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

Ich möchte das Formular abgeschickt werden, wenn ich auf die Schaltfläche „Senden“ klicken. Wenn ich auf die Schaltfläche klicke, erreicht die Steuerung nicht die this.gotEmail Methode.

Warum ist das der Fall?

Answer 1

FormGroup bietet nicht am Senden Ereignis. Sie können es wickeln mit form Element und Event-Handler es anbringt:

<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

Es gibt eine Sache fehlt, glaube ich.

In gotEmail sollte es eine preventDefault sein, so dass, wenn der Benutzer drücken Sie 'Enter', wird die Seite nicht neu geladen:

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

Answer 3

Ab Version 0.30.2, können Sie es in ein <Form> wickeln , die die onSubmit-Eigenschaft unterstützt:

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