javascript - 在事件回调函数中获取最新的 prop

Question

是否有可能以及如何在事件回调函数中获取更新的 Prop ？

我可以将 number 属性添加到效果依赖项列表中，但随后会在每次更新时重新添加事件监听器(并删除但为了简单起见缺少逻辑)。

也许可以用 useRef 以某种方式破解它？

JSFiddle

function Scroll({ number }) {
  function onScroll(e) {
    // how to update number prop
    // without removing and
    // re-adding event listener?

    // it's always the value first
    // time passed as number prop
    console.log(number);
  }

  const scrollEl = React.useRef();
  React.useEffect(() => {
    scrollEl.current = document.getElementById('scroll');
    scrollEl.current.addEventListener('scroll', onScroll);
  }, []);

  return (
    <div id="scroll">
      <div className="content" />
    </div>
  );
}

注意:在这种情况下我不能使用 React 的合成事件。

Answer 1

您可以绑定(bind) onScroll 函数。

将您的 Scroll 组件调整为:

function Scroll({ number }) {
  this.number = number;
  function onScroll(e) {
    // how to update number prop
    // without removing and
    // re-adding event listener?
    console.log(this.number);
  }

  const scrollEl = React.useRef();
  React.useEffect(() => {
    scrollEl.current = document.getElementById('scroll');
    scrollEl.current.addEventListener('scroll', onScroll.bind(this));
  }, []);

  return (
    <div id="scroll">
      <div className="content" />
    </div>
  );
}

如果您不习惯使用 this，您可以更改为不同的对象。