[英]Closing popup on clicking outside component
Before wrote this post, I saw this post , but i'm not able to link all of the code to mine. 在写这篇文章之前,我看过这篇文章 ,但是我无法将所有代码链接到我的代码上。
This is my toggle component: 这是我的切换组件:
<ToggleContent
toggle={show => (
<div>
<button type="button" onClick={show} className={styles.acronym}>
{acronym}
</button>
</div>
)
}
content={show => (
<LogoutCard onClick={show} acronym={acronym} name={name} />
)}
/>
and this is the inside of ToggleContent
这是
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>
);
}
and this is the wrapper of LogoutCard inside the props content
这是道具
content
中LogoutCard的包装
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>;
}
Problem 问题
The problem is that I'm able to print the alert, but i'm not able to close the popup because I'm not able to pass the show
value, that's in the only allowed to close and open the little popup. 问题是我能够打印警报,但是由于无法传递
show
值而无法关闭弹出窗口,这是唯一允许关闭并打开小弹出窗口的方法。
Question 题
How can I close the popup ? 如何关闭弹出窗口?
You need to pass a say a name, onClick
function to handle the logic needed to execute to close the popup as needed. 您需要传递一个名字,
onClick
函数来处理执行以根据需要关闭弹出窗口所需的逻辑。 Also simplifying the logic to an toggle
action that just negates the current state would be enough to manage the show / hide behaviour of the popup. 将逻辑简化为仅取消当前状态的
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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.