web-dev-qa-db-fra.com

Impossible de soumettre le formulaire react-bootstrap

J'ai le composant react-bootstrap suivant:

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

J'aimerais que le formulaire soit soumis lorsque je clique sur le bouton "Envoyer".

Cependant, si je clique sur le bouton, le contrôle n'atteint pas la méthode this.gotEmail.

Pourquoi est-ce le cas?

twitter-bootstrapreactjsreact-bootstrap
13
octavian

FormGroup ne fournit pas sur l'événement submit. Vous pouvez l'envelopper avec l'élément form et y attacher un gestionnaire d'événements:

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

Je pense qu'il manque une chose.

Dans gotEmail, il devrait y avoir une preventDefault, donc si l'utilisateur appuie sur 'entrée', la page ne rechargera pas 

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

A partir de la version 0.30.2, vous pouvez l'envelopper dans un <Form>, qui supporte la propriété 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>
3
Kevin Lee

J'ai trouvé le succès avec raectstrap en utilisant:

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

0
codeislife