如何在React中处理特殊的Bootstrap事件？

Question

在直接的jQuery中,我可以做类似的事情

$('#myCollapsible').on('click', 'hidden.bs.collapse', function () {
  // do something…
})

但在React中有没有"正确"的方法呢？如果以上是要走的路,我应该在哪里放置该事件处理程序？请注意,我没有使用react-bootstrap插件.

Answer 1

处理React不直接支持的事件的正确方法是在组件安装后向DOM节点添加事件侦听器,并在组件卸载时将其删除:

class MyCollapsible extends React.Component {
  constructor() {
    super()
    // Bind the method in the constructor instead of binding it in render, so you only do it once
    this.handleHiddenBsCollapse = this.handleHiddenBsCollapse.bind(this)
  }

  componentDidMount() {
    this.myCollapsible.addEventListener('hidden.bs.collapse', this.handleHiddenBsCollapse)
  }

  componentWillUnmount() {
    this.myCollapsible.removeEventListener('hidden.bs.collapse', this.handleHiddenBsCollapse)
  }

  handleHiddenBsCollapse(event) {
    // Do something...
  }

  render() {
    // Settings refs with node => this.bla = node is recommended
    // because this.refs is deprecated.
    // in this example "node" is the DOM node itself, not a react reference
    return (
      <div ref={node => (this.myCollapsible = node)} />
    )
  }
}

使用DOM引用的文档:https://facebook.github.io/react/docs/refs-and-the-dom.html