这是我第一次真正在项目中正确使用 React Hooks,所以如果我不太了解,请多多包涵。
在下面的组件中,我的目标是显示 <HelperTooltip>
在加载时以及滚动 div(不是窗口)滚动时我想在它滚动 X 像素后隐藏。
我的想法是在滚动 <div/>
上创建一个 useRef 对象元素,然后我可以添加一个事件监听回调函数,然后可以切换状态以隐藏 <HelperTooltip>
我在下面创建了一个 Codesandbox 来尝试演示我正在尝试做的事情。正如您在演示中看到的 node.addEventListener('click')
工作正常,但是当我尝试调用 node.addEventListener('scroll')
时它没有开火。
我不确定我是否采用了错误的方法,我们将不胜感激任何帮助。在 codesandbox 演示中,它是我试图在滚动中隐藏的 react 图像,而不是 <HelperTooltip>
CodeSandbox 链接:https://codesandbox.io/s/zxj322ln24
import React, { useRef, useCallback, useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const App = props => {
const [isLogoActive, toggleLogo] = useState(true);
const scrollElementRef = useCallback(node => {
node.addEventListener("click", event => {
console.log("clicked", event);
});
/*
I want to add the scroll event listener
here and the set the state isLogoActive to
false like the event listener above but the 'scroll' event
is firing --- see below on line 21
*/
// node.addEventListener("scroll", event => {
// console.log("scrolled", event);
// toggle log
// });
});
return (
<div className="scrolling-container">
<div ref={scrollElementRef} className="scrolling-element">
<p>top</p>
{isLogoActive && (
<div className="element-to-hide-after-scroll">
<img
style={{ width: "100px", height: "100px" }}
src="https://arcweb.co/wp-content/uploads/2016/10/react-logo-1000-transparent-768x768.png"
/>
</div>
)}
<p>bottom</p>
</div>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("app"));
最佳答案
对于此特定用例,一种更简单的方法可能是使用 onScroll
属性并使用事件 target
中的 scrollTop
属性来计算看看你是否应该隐藏图像。
示例
const { useState } = React;
const App = props => {
const [isLogoActive, setLogoActive] = useState(true);
const onScroll = e => {
setLogoActive(e.target.scrollTop < 100);
};
return (
<div onScroll={onScroll} style={{ height: 300, overflowY: "scroll" }}>
<p style={{ marginBottom: 200 }}>top</p>
<img
style={{
width: 100,
height: 100,
visibility: isLogoActive ? "visible" : "hidden"
}}
src="https://arcweb.co/wp-content/uploads/2016/10/react-logo-1000-transparent-768x768.png"
/>
<p style={{ marginTop: 200 }}>bottom</p>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
关于javascript - addEventListener ('scroll' ) 到可滚动的 <div/> 使用 useRef - React,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55356172/