Question

我正在使用React滑动滑块。我想实现wheel事件，以便当用户在触控板上滚动时会更改当前幻灯片。 https://stackblitz.com/edit/react-slick-slider-issues我正在使用useRef来引用滑块，然后在事件侦听器回调中调用平滑函数。

当它只是一个子组件时很好，但是出于好奇，我在初始引用下方的父对象中添加了同一个孩子。两个滑块都调用slickNext和slickPrev。是由于我使用useRef的方式还是仅当用户位于该滑块上时才可以调用滑动功能？

Answer 1

那是因为您正在听window.addEventListener，这意味着无论用户滚动到哪里，两个滑块都会触发slickNext和slickPrev。

如果要为每个Slider触发这些功能，则应在组件根目录本身上监听scroll。

useEffect(() => {
  if (!parentRef.current) {
    return;
  }
  parentRef.current.addEventListener('wheel', (e)=>handleScroll(e));

  return (() => {
    parentRef.current.removeEventListener('wheel',(e)=>handleScroll(e));
  });
}, [parentRef, rowData]);

<div ref={parentRef} style={{ backgroundColor: "green", height: "140px" }}>
  {...}
</div>

工作示例：https://stackblitz.com/edit/react-slick-slider-issues-xunhy3?file=ReactSlider.js

对子组件（useRef）有反应吗？

1 个答案: