如何在反应中收听引导模式关闭事件答案

【问题标题】：How to listen to bootstrap modal close event in react如何在反应中收听引导模式关闭事件
【发布时间】：2018-11-08 08:55:11
【问题描述】：

我想在反应中收听引导模式关闭事件，因为我在模式中有一个表单，并且想在模式关闭时清除字段。我知道如何在 jquery 中做到这一点，

$('#modal-form').on('hidden.bs.modal', fnClearForm);

但是这里我想在组件中绑定一个函数。

注意：我不能使用 react-bootstrap。这是一个类似的question，但它没有解决我的问题。

这是我的组件，

class MyModal extends Component {

clearForm = () => {
  -- code here --
}

render() {
    return (
        <div className="modal right fade" id="add-user-modal" role="dialog">
          <div className="modal-dialog" role="document">
            <div className="modal-content">
              -- form goes here --
            </div>
          </div>
        </div>
    )
}

这是我打开模式的方式，

<a className="btn" data-toggle="modal" data-target="#add-user-modal">..</a>

【问题讨论】：

问题不清楚。您可以使用相同的方式执行此操作，但您可能会在 清除表单 的组件中使用 this.handleModalClose 而不是 fnClearForm。您开始在 componentDidMount 内监听该事件。
在您打开模态和模态关闭处理函数的位置分享您的代码
@SergiuParaschiv 请告诉我怎么做。我已经发布了我的组件代码
$('#modal-form').modal('hide');

标签： javascript reactjs bootstrap-modal

【解决方案1】：

恕我直言，由于您不能使用 react 包进行引导，只能使用 cdn。

我认为没有准确的方法来收听模态的关闭。另一件事是关闭自举模式的方法很少。（退出键，点击背景也会关闭模态）。

我现场能想到的最好的办法就是每次打开表单时都清空一下。

我们可能无法听到模式的关闭，但至少我们可以知道它何时会打开。

这是我制作的示例 sn-p

小提琴：https://jsfiddle.net/keysl183/69z2wepo/318595/

class MyModal extends React.Component {
        constructor(props){
        super(props);
      this.handleOnChange = this.handleOnChange.bind(this);
      this.state= {
        testInput:""
      }
    }

    handleOnChange(e){
        this.setState({
            [e.target.name] : e.target.value
        })
    }

    ClearForm =() =>{
      this.setState({testInput:""});
    }

  render() {
      return (
          <div className="modal right fade" id="add-user-modal" role="dialog">
            <div className="modal-dialog" role="document">
              <div className="modal-content">
                   Hi <br></br>
                   Test Modal
                   <input type="text"  onChange={this.handleOnChange} name="testInput" value={this.state.testInput}  ></input>
                   <br></br>
              </div>
            </div>
          </div>
      )
  }
}

class Hello extends React.Component {
  constructor(props){
    super(props);
        this.MyModal = React.createRef();
  }

  render() {
    return <div>
      <MyModal ref={this.MyModal}></MyModal>
    <a onClick={()=>{this.MyModal.current.ClearForm()}}className="btn" data-toggle="modal" data-target="#add-user-modal">SHOW MODAL</a>      
    </div>;
  }
}



ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

这将在每次打开模态组件时清除其内部的输入。

另外，我发现在切换模式时创建 ref 而不是 props 更容易。您可以避免混乱的道具，只需在模态组件中声明一个函数并在任何地方重用它。

【讨论】：

谢谢。打开时清空表单很容易实现
没问题，只要有帮助！

【解决方案2】：

我在不使用react-bootstrap 的情况下寻找相同的东西，但我真的很想知道模式何时打开然后关闭（按键、单击外部或关闭），以便我可以运行我的this.props.onClose 函数。我终于使用MutationObserver 进行了某种破解，并将其附加到引导模式div。如果未提供 onClose 道具，我还包括一个“catch”。

state = {
    isOpen: false
  }

  modalRef = React.createRef()

  // Check if already open and handle onClose if closing
  observer = new MutationObserver(mutation => {
    const hasShowClass = mutation[0].target.classList.contains('show')
    const { isOpen } = this.state
    
    if(hasShowClass && !isOpen) {
      this.setState({
        isOpen: true
      })
    } else if(!hasShowClass && isOpen) {
      this.props.onClose()
      this.setState({
        isOpen: false
      })
    }
  })

  componentDidMount() {
    this.props.onClose &&
      this.observer.observe(this.modalRef, { 
        attributes: true, 
        attributeFilter: ['class'] 
      })
  }

  componentWillUnmount() {
    this.props.onClose && this.observer.disconnect()
  }

<div ref={e => this.modalRef = e} className="modal fade" id={this.props.id} tabIndex="-1" role="dialog" aria-labelledby={`user-form-modal-label`} aria-hidden="true">
</div>

【讨论】：