Twitter bootstrap 3 如何处理React中的特殊引导事件？

在直截了当的jQuery中，我可以执行以下操作

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

---

但是，有没有一种“正确”的方法来做这件事呢？如果以上就是解决方法，那么我应该将事件处理程序放在哪里？请注意，我没有使用react引导插件。

处理react不直接支持的事件的正确方法是在组件装载后将事件侦听器添加到DOM节点，并在组件卸载时将其删除：

类MyCollapsible.Component{
构造函数（）{
超级（）
//在构造函数中绑定该方法，而不是在呈现中绑定它，因此只需执行一次
this.handlehiddenbcollapse=this.handlehiddenbcollapse.bind（this）
}
componentDidMount（）{
this.myCollapsible.addEventListener（'hidden.bs.collapse'，this.handlehiddenbcollapse）
}
组件将卸载（）{
this.myCollapsible.removeEventListener（'hidden.bs.collapse'，this.handlehiddenbcollapse）
}
HandleHiddenbcollapse（事件）{
//做点什么。。。
}
render（）{
//建议使用节点=>this.bla=节点进行设置引用
//因为不推荐使用this.refs。
//在本例中，“节点”是DOM节点本身，而不是react引用
返回(
（this.myCollapsible=node）}/>
)
}
}

我知道我回答这个问题已经晚了两年多，但我最近遇到了同样的问题，而且我的答案对我不起作用。通过利用受影响组件的

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可以找到它并正确地连接事件处理程序。

如果您正在构建功能组件，则应该使用useEffect挂钩

另外，您可能需要使用

窗口。$（“#myCollapsible”）

而不是

$（“#myCollapsible”）

---

奇怪的我不了解这些事件。当我在Chrome工具中查看节点时，处理程序就在那里。我用jQuery

$（'.panel'）.on（“hidden.bs.collapse”，tc）添加的处理程序显示为打开
hide
和
show
并触发。检查您的绑定在react版本中是否正确。还可以尝试使用
（foo，bar）=>这个。handlehiddenbcollapse（foo，bar）
作为
addEventListener
中的事件处理程序来查看您到底得到了什么。我想问题是jQuery事件是以一种与addEventListeners不兼容的方式“命名的”。@FaustoNA我正在尝试对功能组件执行类似的操作。我可以在下拉关闭时触发事件，但我也想访问所选元素。我的问题是，内部触发函数selected items数组始终为空。
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');
        }
    }, []);

    // ...
}