Question

有没有办法可以听一下bootstrap模态关闭？在纯jQuery中，我会做类似的事情：

$('#myModal').on('hidden.bs.modal', function () {
     // do something…
})

但是，做出反应的适当方法是什么？

提前致谢！

Answer 1

如果您正在使用react-bootstrap's modals您可以通过onHide或onExit prop传递处理函数。

Answer 2

下面的代码会为您提供这个想法，因为您可以控制是否使用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>
  );
 }
});

您可以从以下文档网址获取更多信息，

http://react-bootstrap.github.io/components.html#modals

在reactjs中监听bootstrap模态关闭事件

2 个答案: