如何隐藏在其onSubmit中有preventDefault()的“react-bootstrap模式”表单?

时间:2015-03-15 18:07:41

标签: hide reactjs preventdefault onsubmit react-bootstrap

问题是当我不使用preventDefault()时,页面会重新加载onSubmit并隐藏。当使用preventDefault时,我的表单正在onSubmit中执行它所拥有的内容,但它在提交后没有隐藏。当我使用其他只有

的“关闭”按钮时
onClick={this.props.onRequestHide}   

形式隐藏得很好。

如何在使用onSubmit完成后隐藏该表单。

  <Modal {...this.props} className="adressModal" bsStyle="primary" title='Adress Form' animation={false}>
    <form className="addressModal" onSubmit={this.handleSubmit} >
      <div className="modal-body">
        <Input type="text" placeholder="Enter Kraj" className="form-control" valueLink={this.linkState('address')} ref="address" hasFeedback required/>
      </div>
      <div className="modal-footer">
      <ButtonGroup>
        <Button className="btn btn-default" onClick={this.props.onRequestHide} data-dismiss="modal" active>Close</Button>
        <Button bsStyle="primary" className="btn btn-default" type="submit" disabled={this.state.isSubmitting} >Save</Button>
  </ButtonGroup>
  </div>
    </form>
</Modal>

代码只是来自ModalTrigger示例的混合     http://react-bootstrap.github.io/components.html#modals 和反应基础教程
http://facebook.github.io/react/docs/tutorial.html

1 个答案:

答案 0 :(得分:3)

您只需调用this.props.onRequestHide函数

中的handleSubmit函数即可

类似的东西:

handleSubmit: function() {
  /* ... */
  this.props.onRequestHide();
  e.preventDefault();
},