提交时关闭react-bootstrap模式

时间:2016-12-24 08:31:51

标签: reactjs

我想询问在提交表单后如何关闭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不会关闭:(

0 个答案:

没有答案