Can not submit form react-bootstrap

Question

I have the following react-bootstrap component:

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

I would like the form to be submitted when I click the button "Send".

However, if I click the button, control doesn't reach the this.gotEmail method.

Why is that the case?

Solution 1

FormGroup does not provide on submit event. You can wrap it with form element and attach event handler to it:

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

Solution 2

There is one thing missing, I think.

In gotEmail, there should be a preventDefault, so if the user press 'enter', the page won't reload:

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

Solution 3

As of version 0.30.2, you can wrap it in a <Form>, which supports the onSubmit property:

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

Solution 4

I've been successful with reactstrap using the following snippet:

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

View more solutions

Comments

[Ycon]

Just curious, whats's the use of the role="form"? For my examlpe, I've just got <FormGroup> and it works

[migueloop]

So if I´m using <Form horizontal> as the doc says (react-bootstrap.github.io/components.html#forms-horizontal)‌​, Do I have to wrap this with another form since there is no onSubmit prop and have 2 forms in my DOM?

[Kevin Lee]

@migueloop as of version 0.30.2, you can just use <Form horizontal onSubmit={this.gotEmail}>