为了账号安全,请及时绑定邮箱和手机立即绑定

如何在反应中触发滚动事件的函数

如何在反应中触发滚动事件的函数

qq_遁去的一_1 2023-09-28 17:24:54
根据我查看的 React 文档,我想我会使用“useRef”来更新函数,但我不确定。我想触发一个事件来使视频静音,有一个滚动事件。现在我正在使用 onClick 来播放/暂停视频。视频.jsimport 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;这与如何在反应组件中添加滚动事件不同,因为我没有将函数扩展为组件。
查看完整描述

2 回答

?
翻翻过去那场雪

TA贡献2065条经验 获得超13个赞

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



查看完整回答
反对 回复 2023-09-28
?
白板的微信

TA贡献1883条经验 获得超3个赞

使用滚动事件侦听器您应该能够实现您正在寻找的目标。


里面useEffect定义一个事件滚动监听器


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


       // your logic goes here

      });


查看完整回答
反对 回复 2023-09-28
  • 2 回答
  • 0 关注
  • 61 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信