javascript - 单击外部组件时关闭弹出窗口
问题描述
在写这篇文章之前,我看到了这篇文章,但我无法将所有代码链接到我的。
这是我的切换组件:
<ToggleContent
toggle={show => (
<div>
<button type="button" onClick={show} className={styles.acronym}>
{acronym}
</button>
</div>
)
}
content={show => (
<LogoutCard onClick={show} acronym={acronym} name={name} />
)}
/>
这是里面ToggleContent
function ToggleContent({ toggle, content }) {
const [isShown, setIsShown] = useState(false);
const hide = () => setIsShown(false);
const show = () => setIsShown(!isShown);
return (
<Fragment>
{toggle(show)}
{isShown && content(hide)}
</Fragment>
);
}
这是道具内 LogoutCard 的包装content
import React, { useRef, useEffect } from "react";
/**
* Hook that alerts clicks outside of the passed ref
*/
function useOutsideAlerter(ref) {
/**
* Alert if clicked on outside of element
*/
function handleClickOutside(event) {
if (ref.current && !ref.current.contains(event.target)) {
alert("You clicked outside of me!");
}
}
useEffect(() => {
// Bind the event listener
document.addEventListener("mousedown", handleClickOutside);
return () => {
// Unbind the event listener on clean up
document.removeEventListener("mousedown", handleClickOutside);
};
});
}
/**
* Component that alerts if you click outside of it
*/
export default function OutsideAlerter(props) {
const wrapperRef = useRef(null);
useOutsideAlerter(wrapperRef);
return <div ref={wrapperRef}>{props.children}</div>;
}
问题
问题是我可以打印警报,但我无法关闭弹出窗口,因为我无法传递show
值,这是唯一允许关闭和打开小弹出窗口的方法。
问题
如何关闭弹出窗口?
解决方案
您需要传递一个名称,onClick
函数来处理执行所需的逻辑以根据需要关闭弹出窗口。还将逻辑简化为toggle
仅否定当前状态的操作就足以管理弹出窗口的显示/隐藏行为。
import React, { useRef, useEffect } from "react";
/**
* Hook that alerts clicks outside of the passed ref
*/
function useOutsideAlerter(ref, onClick) {
/**
* Alert if clicked on outside of element
*/
function handleClickOutside(event) {
if (ref.current && !ref.current.contains(event.target)) {
alert("You clicked outside of me!");
onClick();
}
}
useEffect(() => {
// Bind the event listener
document.addEventListener("mousedown", handleClickOutside);
return () => {
// Unbind the event listener on clean up
document.removeEventListener("mousedown", handleClickOutside);
};
}, [handleClickOutside]);
}
/**
* Component that alerts if you click outside of it
*/
export default function OutsideAlerter(props) {
const wrapperRef = useRef(null);
return <div ref={wrapperRef}>{props.children}</div>;
}
function ToggleContent({ toggle, content }) {
const [isShown, setIsShown] = useState(false);
const toggle = () => setIsShown(!isShown);
const onClick = () => {
toggle()
}
useOutsideAlerter(wrapperRef, onClick);
return (
<Fragment>
{toggle(show)}
{isShown && content()}
</Fragment>
);
}
推荐阅读
- javascript - 如何以表格形式获取 axios 发布请求响应
- php - 将逗号分隔的字符串分隔为整数值
- python - 使用python循环调用多个SQL数据库
- node.js - 尝试使用 map() 解决 API 的 Promise
- mongodb - 使用 MongoDB 字段作为另一个值的键引用
- flutter - 为什么我无法在 FLutter 中捕获 Grpc 错误?
- angular - 无法从可观察对象数组中返回过滤后的可观察对象
- aws-lambda - AWS Lambda 连接到 Docker 中的本地 Postgres
- c++ - 打印同一个数组,不同的功能是不同的,为什么?
- html - 带有下载属性的标签在 iphone 中不起作用?