我想询问在提交表单后如何关闭react-bootstrap模式。这是我的代码:
class BoardAdd extends React.Component {
constructor(props){
super(props);
this.state = {
name: '',
boardAddModalShow: false
}
}
openAddBoardModal(){
this.setState({ boardAddModalShow: true });
}
closeAddBoardModal(){
this.setState({ boardAddModalShow: false });
}
addBoard(formProps) {
this.props.dispatch(reset('BoardAddModalForm'));
this.closeAddBoardModal;
}
render() {
const { error, handleSubmit } = this.props;
return (
<Col lg={3}>
<a href="javascript:;" className={style.boardItemAdd} onClick={this.openAddBoardModal.bind(this)}>
<div className={[style.boardItemContainer,style.boardItemGray].join(' ')}>
Create New Board
</div>
</a>
<Modal show={this.state.boardAddModalShow} onHide={this.closeAddBoardModal.bind(this)} bsSize="small" aria-labelledby="contained-modal-title-sm">
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-sm">Create Board</Modal.Title>
</Modal.Header>
<Modal.Body>
<form onSubmit={handleSubmit(this.addBoard.bind(this))}>
<Field name="name" component={renderField} type="text" placeholder="What are you organizing" />
<button className="btn">Submit</button>
</form>
</Modal.Body>
</Modal>
</Col>
)
}
}
我尝试在addBoard函数中调用closeAddBoardModal,就像我在<Modal>
的onHide道具上所做的那样,但仍然没有运气,Modal不会关闭:(