如何在 useEffect 中向 useRef 添加事件侦听器 [英] How to add an event listener to useRef in useEffect
问题描述
我正在构建一个自定义钩子,我想在其中向 ref 添加一个事件侦听器,但我不确定如何正确清理,因为 listRef
和 listRef.current
可以为空:
export const myHook: MyHook = () =>{const listRef = useRef(null)useEffect(() => {//我可以在这里检查 `listRef.current` 是否存在 ...如果(listRef && listRef.current){listRef.current.addEventListener(...)}//...但是返回函数的正确方法是什么?返回 listRef.current.removeEventListener(...)})返回 [listRef]}
但我也必须检查返回函数中是否存在 listRef
,对吗?
是的,您可以做的是将所有内容都包裹在 if 语句中
useEffect(() => {//if 语句周围的一切如果(listRef && listRef.current){listRef.current.addEventListener(...)返回 () =>{listRef.current.removeEventListener(...)}}})
如果你不调用addEventListener
,你就不需要调用removeEventListener
,所以这就是为什么你把所有的东西都放在if
.
您需要在 return 中传递一个函数来执行您在清理中想做的事情.
export const myHook: MyHook = () =>{const listRef = useRef(null)useEffect(() => {//还行吧如果(listRef && listRef.current){listRef.current.addEventListener(...)}//传递一个调用你的函数的函数返回 () =>{listRef.current.removeEventListener(...)}})返回 [listRef]}
你需要注意的另一件事是在fooEventListener
中,...
应该是函数的相同引用,这意味着:
你不应该这样做:
useEffect(() => {如果(listRef && listRef.current){listRef.current.addEventListener(() => console.log('do something'))}返回 () =>{listRef.current.removeEventListener(() => console.log('do something'))}})
你应该这样做:
useEffect(() => {const myFunction = () =>console.log('做某事')如果(listRef && listRef.current){//传递相同的引用listRef.current.addEventListener(myFunction)}返回 () =>{//传递相同的引用listRef.current.removeEventListener(myFunction)}})
I'm building a custom hook where I want to add an event listener to a ref, but I'm not sure how to clean up properly, since listRef
and listRef.current
could be null:
export const myHook: MyHook = () => {
const listRef = useRef<HTMLDivElement>(null)
useEffect(() => {
// I can check for the presence of `listRef.current` here ...
if (listRef && listRef.current) {
listRef.current.addEventListener(...)
}
// ... but what's the right way for the return function?
return listRef.current.removeEventListener(...)
})
return [listRef]
}
Edit:
but I have to check for the presence of
listRef
in the return function too, right?
Yes, and what you could do is wrap everythinig around the if statement
useEffect(() => {
// Everything around if statement
if (listRef && listRef.current) {
listRef.current.addEventListener(...)
return () => {
listRef.current.removeEventListener(...)
}
}
})
If you don't call addEventListener
, you don't need to call removeEventListener
, so that is why you put everything inside the if
.
You need to pass a function in the return that do what you want to do in the cleanup.
export const myHook: MyHook = () => {
const listRef = useRef<HTMLDivElement>(null)
useEffect(() => {
// This is ok
if (listRef && listRef.current) {
listRef.current.addEventListener(...)
}
// Passing a function that calls your function
return () => {
listRef.current.removeEventListener(...)
}
})
return [listRef]
}
Another thing you need to notice is that inside the fooEventListener
, the ...
should be the same reference of the function, this means:
You shoudn't do this:
useEffect(() => {
if (listRef && listRef.current) {
listRef.current.addEventListener(() => console.log('do something'))
}
return () => {
listRef.current.removeEventListener(() => console.log('do something'))
}
})
And you should do :
useEffect(() => {
const myFunction = () => console.log('do something')
if (listRef && listRef.current) {
// Passing the same reference
listRef.current.addEventListener(myFunction)
}
return () => {
// Passing the same reference
listRef.current.removeEventListener(myFunction)
}
})
这篇关于如何在 useEffect 中向 useRef 添加事件侦听器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!