如何在UseEffect中将事件侦听器添加到UseRef

Question

我想向React组件中的节点添加一个eventListener。我正在使用useRef钩子选择节点。我是useCallback，因为useRef在其第一次渲染时是null。

const offeringsContainer = useRef(null);
const setOfferingsContainer = useCallback((node) => {
if (node !== null) {
offeringsContainer.current = node;
}
}, []);

我的问题是，我的useEffect对offeringContainer引用的任何更改都没有反应。这意味着，offeringContainer.current就是null。

useEffect(() => {
checkHeaderState();
offeringsContainer.current.addEventListener("wheel", onOfferingsContainerWheel, { passive: false });
}, [offeringsContainer.current]);

这是我的JSX:

return (
<Fragment>
<div className="card-business-products-services-title-text">
Products &amp; Services
</div>
<div
className="card-business-products-services-container"
id="card-business-products-services-container"
onWheel={onOfferingsContainerWheel}
ref={setOfferingsContainer}
>
{renderOfferings()}
</div>
</Fragment>
);

我知道我做了一些错误的事情，但我的useEffect挂钩应该是监听offeringsContainer.current的任何更改。

Answer 1

您可以通过组件的offeringsContainer到达ref。只有在第一次渲染时才会调用useEffect，这就是为什么offeringsContainer.current不会是null的原因。

并且您忘记了在组件将被卸载后删除侦听器。

您的代码应该是这样的；

const offeringsContainer = useRef(null);
useEffect(() => {
checkHeaderState();
offeringsContainer.current.addEventListener(
"wheel",
onOfferingsContainerWheel,
{ passive: false }
);
return () => offeringsContainer.current.removeEventListener("wheel");
}, []);
return (
<Fragment>
<div className="card-business-products-services-title-text">
Products &amp; Services
</div>
<div
className="card-business-products-services-container"
id="card-business-products-services-container"
onWheel={onOfferingsContainerWheel}
ref={offeringsContainer}
>
{renderOfferings()}
</div>
</Fragment>
);

示例：https://codesandbox.io/s/wizardly-banzai-3fhju?file=/src/App.js