如何将事件监听器添加到 UseEffect 中的 UseRefs

Question

我想在我的 React 组件中添加一个 eventListener 到一个节点。我正在选择带有 useRef 挂钩的节点。我是 useCallback，因为 useRef 在第一次渲染时是 null。

const offeringsContainer = useRef(null);

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

我的问题是我的 useEffect 对 offeringContainer ref 所做的任何更改都没有反应。意思是，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

如何将事件监听器添加到 UseEffect 中的 UseRefs

How to add Event Listeners to UseRefs within UseEffect

javascript

reactjs

usecallback

use-effect

use-ref