在直接的 jQuery 中,我可以做类似的事情
$('#myCollapsible').on('click', 'hidden.bs.collapse', function () {
// do something…
})
但是在 React 中是否有“正确”的方法来做到这一点?如果以上是要走的路,我应该在哪里放置该事件处理程序?请注意,我没有使用 react-bootstrap 插件。
在直接的 jQuery 中,我可以做类似的事情
$('#myCollapsible').on('click', 'hidden.bs.collapse', function () {
// do something…
})
但是在 React 中是否有“正确”的方法来做到这一点?如果以上是要走的路,我应该在哪里放置该事件处理程序?请注意,我没有使用 react-bootstrap 插件。
处理 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 代码在#myCollapsible
DOM 中之前不会运行。这确保 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');
}
}, []);
// ...
}