如何解决如何修复错误“使用打字稿在'RefObject'类型上不存在属性包含并做出反应?
我想在用户使用打字稿单击对话框外部的任何位置时关闭对话框并做出反应。
下面是我的代码,
function Dialog ({setIsDialogOpen,items}: Props) {
const dialogRef = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
const handleClickOutsideDialog = (event: any) => {
if (
dialogRef &&
!dialogRef.contains(event.target)//error here
) {
alert('You clicked outside of me!');
setIsDialogOpen(false);
}
};
document.addEventListener('mousedown',handleClickOutsideDialog);
},[setIsDialogOpen]);
return (
<Wrapper ref={dialogRef}>
<Container_one>
<span>title</span>
<Description> some big description</Description>
</Container_one>
<Container_two>
{items.map(item => (
<div
key={item.id}
/>
))}
</Container_two>
</Wrapper>
);
我不确定这是怎么回事。有人可以帮我吗谢谢。
解决方法
您应该将 event.target
断言为 HTMLElement
或 HTMLDivElement
。
顺便说一下,您可以将事件参数设置为 MouseEvent
。
所以,正确的代码如下:
const handleClickOutsideDialog = (event: MouseEvent) => {
if (
dialogRef &&
!dialogRef.contains(event.target as HTMLDivElement)
) {
alert('You clicked outside of me!');
setIsDialogOpen(false);
}
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。