单击外部组件时关闭弹出窗口 [英] Closing popup on clicking outside component

问题描述

在写这篇文章之前，我看到了这篇文章，但我不是能够将所有代码链接到我的.

这是我的切换组件:

(<div><button type="button" onClick={show} className={styles.acronym}>{缩写}

)}内容={显示=>(<LogoutCard onClick={show} acronym={acronym} name={name}/>)}/>

这是ToggleContent

的内部

function ToggleContent({ toggle, content }) {const [isShown, setIsShown] = useState(false);const 隐藏 = () =>设置显示(假)；const show = () =>setIsShown(!isShown);返回 (<片段>{切换(显示)}{isShown &&内容(隐藏)}</片段>);}

这是在道具content

中LogoutCard的包装器

import React, { useRef, useEffect } from "react";/*** 提醒在传递的 ref 之外的点击的钩子*/函数 useOutsideAlerter(ref) {/*** 如果在元素外单击，则发出警报*/函数handleClickOutside(事件){if (ref.current && !ref.current.contains(event.target)) {alert("你在我外面点击了！");}}useEffect(() => {//绑定事件监听器document.addEventListener("mousedown", handleClickOutside);返回 () =>{//在清理时解除绑定事件侦听器document.removeEventListener("mousedown", handleClickOutside);};});}/*** 如果您在外部单击时发出警报的组件*/导出默认函数 OutsideAlerter(props) {const wrapperRef = useRef(null);useOutsideAlerter(wrapperRef);返回<div ref={wrapperRef}>{props.children}</div>;}

问题

问题是我可以打印警报，但我无法关闭弹出窗口，因为我无法传递 show 值，这是唯一允许的关闭和打开小弹出窗口.

问题

如何关闭弹出窗口?

解决方案

你需要传递一个say a name，onClick 函数来处理需要执行的逻辑来关闭弹出窗口.还将逻辑简化为仅否定当前状态的 toggle 操作足以管理弹出窗口的显示/隐藏行为.

import React, { useRef, useEffect } from "react";/*** 提醒在传递的 ref 之外的点击的钩子*/函数 useOutsideAlerter(ref, onClick) {/*** 如果在元素外单击，则发出警报*/函数handleClickOutside(事件){if (ref.current && !ref.current.contains(event.target)) {alert("你在我外面点击了！");点击()；}}useEffect(() => {//绑定事件监听器document.addEventListener("mousedown", handleClickOutside);返回 () =>{//在清理时解除绑定事件侦听器document.removeEventListener("mousedown", handleClickOutside);};}, [handleClickOutside]);}/*** 如果您在外部单击时发出警报的组件*/导出默认函数 OutsideAlerter(props) {const wrapperRef = useRef(null);返回<div ref={wrapperRef}>{props.children}</div>;}功能 ToggleContent({ 切换，内容 }) {const [isShown, setIsShown] = useState(false);const 切换 = () =>setIsShown(!isShown);const onClick = () =>{切换()}useOutsideAlerter(wrapperRef, onClick);返回 (<片段>{切换(显示)}{isShown &&内容()}</片段>);}

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

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

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.

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. 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.

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>
  );
}

这篇关于单击外部组件时关闭弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！