如何解决React JS refuseRef:包含不是函数
我正在做一个React JS项目。我正在使用挂钩和功能组件。我正在使用裁判。我正在使用useRef,因为我在功能组件中。但是contains函数在ref上不起作用。以下是我的代码。
const App = () => {
let refDialog = useRef(null);
document.addEventListener('click',(e) => {
if (refDialog && refDialog.contains(e.target)) {
// I will do something here
}
})
return (
<div>
<Dialog ref={ ref => refDialog = ref}>My dialog content</Dialog>
</div>
)
}
正如您在我的组件中看到的那样,在事件侦听器中,它引发了以下错误。
Uncaught TypeError: refDialog.contains is not a function
我的代码有什么问题?
解决方法
首先删除错字-useRf
-> useRef
。其次-refDialog
是一个只读变量,您不能覆盖它-ref={refDialog}
就足够了(没有ref函数)。最后-refDialog
将保存一个带有current
字段的对象。因此最终条件将是:
if (refDialog.current && refDialog.current.contains(e.target))
,
Dialog
可能不在内部处理引用。在这种情况下,您可以将其包装在div
中(它不会具有完全相同的效果,但是可能仍然可以正常工作):
const App = () => {
const refDialog = useRef(null);
useEffect(() => {
document.addEventListener('click',handleClick);
return () => document.removeEventListener('click',handleClick);
},[]);
const handleClick = e => {
if (refDialog.current?.contains(e.target)) {
// I will do something here
}
}
return (
<div ref={refDialog}>
<Dialog}>My dialog content</Dialog>
</div>
);
}
还要注意,useEffect
的使用是定义代码的方式,每次渲染时,都会创建一个新的事件侦听器,并且不会清除它。创建组件时,您可能只希望执行一次。
如果Dialog是您定义的组件,则需要确保使用forwardRef正确传递了引用。
const Dialog = React.forwardRef((props,ref) => (
<div ref={ref} className="Dialog">{ props.children}</div
));
,
下面的代码应该起作用:
import React from "react";
const App2 = () => {
let refDialog = React.useRef(null);
document.addEventListener("click",(e) => {
if (
refDialog &&
refDialog.current &&
refDialog.current.contains(e.target)
) {
console.log("xx");
}
});
return (
<div>
<div ref={refDialog}>My dialog content</div>
</div>
);
};
您在使用中有错字。 您需要检查refDialog上是否存在当前属性。 与类的同类不同,useRef钩子不会直接返回DOM节点。
,这是您问题的有效版本,
import React,{ useEffect } from 'react';
// YOUR OTHER IMPORT GOES HERE
const App = () => {
const dialogRef = React.useRef(null);
useEffect(() => {
document.addEventListener("click",handleClickElement,false);
// THIS WILL REMOVE THE LISTENER ON UNMOUNT
return () => {
document.removeEventListener("click",false);
};
},[]);
const handleClickElement = event => {
if (dialogRef.current && dialogRef.current.contains(event.target)) {
// YOUR LOGIC
console.log("Am Clicked!")
}
};
return (
<div>
<Dialog ref={dialogRef}>My dialog content</Dialog>
</div>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。