如何在反应中触发滚动事件的功能答案

【问题标题】：How to trigger a function on a scroll event in react如何在反应中触发滚动事件的功能
【发布时间】：2020-12-01 17:50:09
【问题描述】：

根据我查看的 React 文档，我想我会使用“useRef”来更新函数，但我不确定。我想触发一个事件来静音视频有一个滚动事件。现在我正在使用 onClick 播放/暂停视频。

视频.js

import React, { useRef, useState } from "react";
import "./Video.css";

function Video({ url }) {
  const [muted, setMuted] = useState(true);
  const [playing, setPlaying] = useState(false);
  const videoRef = useRef(null);

  var Chrome =
    navigator.userAgent.includes("Chrome") &&
    navigator.vendor.includes("Google Inc");

  const onVideoPress = () => {
    if (playing && !Chrome) {
      videoRef.current.pause();
      setPlaying(false);
      setMuted(true);
    } else if (playing && Chrome) {
      videoRef.current.pause();
      setPlaying(false);
      setMuted(false);
    } else {
      videoRef.current.play();
      setPlaying(true);
      setMuted(false);
    }
  };

  return (
    <div className="video">
      <video
        className="video__player"
        autoPlay={true}
        loop={true}
        muted={muted}
        playsInline={true}
        // controls
        ref={videoRef}
        onClick={onVideoPress}
      >
        <source className="video__controls" src={url} type="video/mp4"></source>
      </video>
      {/* <VideoFooter /> */}
    </div>
  );
}

export default Video;

这与How to add scroll event in react component 不一样，因为我没有将功能扩展为组件。

【问题讨论】：

这能回答你的问题吗？ How to add scroll event in react component

标签： javascript reactjs

【解决方案1】：

使用滚动事件监听器你应该能够实现你想要的。

在useEffect内部定义一个事件滚动监听器

document.addEventListener('scroll', function(e) {

       // your logic goes here
      });

【讨论】：

我会在我的视频元素中使用 onScroll 并在那里调用函数吗？
我试过这个：useEffect(() => { document.addEventListener("scroll", function (e) { e.setMuted(true) }); });是你的意思吗？
当我添加 useEffect(() => { document.addEventListener("scroll", function (e) { e.alert("hi"); }); }); 时没有任何反应
不要使用 e.alert。只需尝试警报（“嗨”）。它应该工作。也不要做e.setMuted(true)，e是事件对象。尝试直接使用 setMuted(true)。

【解决方案2】：

我用过 onScroll={()=> someFunc()}

【讨论】：