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

IT技术 twitter-bootstrap-3 reactjs
2021-05-14 13:38:15

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

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

但是在 React 中是否有“正确”的方法来做到这一点?如果以上是要走的路,我应该在哪里放置该事件处理程序?请注意,我没有使用 react-bootstrap 插件。

3个回答

处理 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 refs 的文档:https : //facebook.github.io/react/docs/refs-and-the-dom.html

我知道我回答这个问题已经晚了两年多,但我最近遇到了同样的问题,而Fausto NA的回答对我不起作用。我能够通过利用受影响组件的componentDidMount方法成功附加我的事件侦听器

import $ from 'jquery';
import React from 'react';

class App extends React.Component {

    componentDidMount() {
        $('#myCollapsible').on('click', 'hidden.bs.collapse', function () {
            alert('#myCollapsible -- hidden.bs.collapse');
        })
    }

    render() {
        return (
            // This is the render method where `#myCollapsible` would be added to the DOM. 
        )
    }
}

为什么会这样:如果您尝试将事件处理程序附加到当前不在 DOM 中的元素,那么 jQuery 将无法成功地将事件附加到它。在上面的示例中,componentDidMount方法中的 jQuery 代码在#myCollapsibleDOM 中之前不会运行这确保 jQuery 可以找到它并正确附加您的事件处理程序。

如果您正在构建功能组件,您应该使用 useEffect 钩子。

也可能你需要使用window.$("#myCollapsible")而不是$("#myCollapsible")

import React, { useEffect } from 'react'
import $ from 'jquery'

export default function MyComponent() {
    useEffect(() => {
        // This code runs when component is mounted:
        window.$("#myCollapsible").on('hidden.bs.collapse', function (e) {
            console.log('hidden.bs.collapse');
        });
        return () => { // This code runs when component is unmounted
            window.$("#myCollapsible").off('hidden.bs.collapse');
        }
    }, []);

    // ...
}