反应子组件的光滑滑块事件（useRef）？

Question

我正在使用 React slick-slider。我想实现滚轮事件，以便当用户在触控板上滚动时，它会更改当前幻灯片。 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）？

React slick-slider wheel Event for child components (useRef)?

javascript

reactjs

react-slick

react-hooks