如何在React中监听引导模式关闭事件

Question

我想在react中监听bootstrap modal close事件，因为我有一个modal形式，并且想在modal close时清除字段。 我知道如何在这样的jquery中做到这一点，

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

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

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

这是我的部分

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软件包用于引导，而只能使用CDN。

我认为没有准确的方法来监听模式的结束。 另一件事是，几乎没有办法关闭boostrap模式。 （退出键，单击背景也会关闭模式）。

我能想到的最好的方法是每次打开表单都将其清除。

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

这是我制作的示例片段

小提琴： 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')
);

每次打开时，都会清除模态组件内部的输入。

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

Answer 2

我在不使用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>