为子组件（useRef）反应滑轮事件？

Posted 2023-02-25

【中文标题】为子组件（useRef）反应滑轮事件？

【英文标题】：React slick-slider wheel Event for child components (useRef)?

【发布时间】：2020-02-12 12:54:23

【问题描述】：

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

当它只是一个子组件时很好，但是出于好奇，我在初始引用下方的父级中添加了相同的子级。两个滑块都调用了slickNext 和slickPrev。是因为我使用useRef 的方式，还是有什么方法可以只在用户在该滑块上时调用光滑的函数？

【参考方案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