javascript - 如何在 react 中监听引导模式关闭事件

Question

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

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

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

注意:我无法使用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>

Answer 1

我在不使用 react-bootstrap 的情况下寻找同样的东西，但我真的想知道模式何时打开然后关闭(按键、单击外部或关闭)，以便我可以运行我的this.props.onClose 函数。我最终使用 MutationObserver 进行了某种破解，并将其附加到 Bootstrap 模态 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>