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

Answer 2

我知道我要回答这个问题已经迟了两年多，但是最近我也遇到了同样的问题，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代码只有在#myCollapsible在DOM中之后才能运行。这样可以确保jQuery可以找到它并正确附加事件处理程序。

Answer 3

如果你正在构建功能组件，你应该使用 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');
        }
    }, []);

    // ...
}

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

3 个答案: