If you want to open/close react-bootstrap modal programmatically? In the newest version of React-Bootstrap, whether a modal is shown or not is controlled by a show prop which is passed to the modal. The OverlayMixin is no longer needed to control the modal state. Controlling the state of the modal is still done via setState, in this example via this.setState({ showModal: true }). The following is based off the example on the React-Bootstrap website:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | const ControlledModalExample = React.createClass({ getInitialState(){ return { showModal: false }; }, close(){ this.setState({ showModal: false }); }, open(){ this.setState({ showModal: true }); }, render() { return ( <div> <Button onClick={this.open}> Launch modal </Button> <Modal show={this.state.showModal} onHide={this.close}> <Modal.Header closeButton> <Modal.Title>Modal heading</Modal.Title> </Modal.Header> <Modal.Body> <div>Modal content here </div> </Modal.Body> <Modal.Footer> <Button onClick={this.close}>Close</Button> </Modal.Footer> </Modal> </div> ); } }); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
