无法提交表单反应-bootstrap

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>

我希望在单击按钮 "Send" 时提交表单。

但是，如果我单击该按钮，控件不会到达 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>

Answer 4

我使用以下代码段成功地使用了 reactstrap：

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

无法提交表单反应-bootstrap

Can not submit form react-bootstrap

twitter-bootstrap

reactjs

react-bootstrap