我需要像这样打开/关闭模态
$(element).modal(’show’)
怎么做?
您正在寻找的是自定义模式触发器,该触发器使用OverlayMixin并允许您自己管理模式状态。您可以控制是否使用模态this.setState({isModalOpen: true})来实现与以下示例中所要求的效果相同的效果。以下代码来自react-bootstrap网站(http://react- bootstrap.github.io/components.html#modals):
OverlayMixin
this.setState({isModalOpen: true})
const CustomModalTrigger = React.createClass({ mixins: [OverlayMixin], getInitialState() { return { isModalOpen: false }; }, handleToggle() { this.setState({ isModalOpen: !this.state.isModalOpen }); }, render() { return ( <Button onClick={this.handleToggle} bsStyle='primary'>Launch</Button> ); }, // This is called by the `OverlayMixin` when this component // is mounted or updated and the return value is appended to the body. renderOverlay() { if (!this.state.isModalOpen) { return <span/>; } return ( <Modal bsStyle='primary' title='Modal heading' onRequestHide={this.handleToggle}> <div className='modal-body'> This modal is controlled by our custom trigger component. </div> <div className='modal-footer'> <Button onClick={this.handleToggle}>Close</Button> </div> </Modal> ); } }); React.render(<CustomModalTrigger />, mountNode);
更新(2015年8月4日)
在最新版本的React- Bootstrap中,是否显示模态由show传递给模态的道具控制。将OverlayMixin不再需要控制模式状态。仍然通过来控制模态的状态setState,在此示例中,通过this.setState({ showModal: true })。以下内容基于React-Bootstrap网站上的示例:
show
setState
this.setState({ showModal: true })
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> ); } });