当用户点击外部时隐藏反应引导吐司答案

【问题标题】：Hide react bootstrap toast when user clicks outside当用户点击外部时隐藏反应引导吐司
【发布时间】：2021-07-22 07:24:05
【问题描述】：

我有一个使用 react-bootstrap 创建的 toast 通知。如果用户点击吐司以外的任何地方，我需要关闭它。有人知道我该怎么做吗？

这是我正在使用的吐司：

//what am I importing
import { Toast } from 'react-bootstrap';

//how am I using it
<Toast
    onClose={() => props.OnClose(false)}
    data-testid="toast"
    show={props.Show}
    delay={10000}
    autohide
>
    <Toast.Header closeButton={false}>
        <div>
            {props.Icon}
        </div>
        <div>
            Title
        </div>
        <div
            onClick={() => props.OnClose(false)}
        >
            <ToastClose />
        </div>
    </Toast.Header>
    <Toast.Body>
        Body text
    </Toast.Body>
</Toast>

【问题讨论】：

标签： reactjs react-bootstrap toast

【解决方案1】：

你可以使用React hookuseRef。使用 useRef 钩子，我们可以轻松访问 DOM 元素，在这种情况下，我们正在访问 Toast 组件并跟踪组件外部发生的点击并触发 setShow(false) 以更新状态并关闭 Toast 组件。如果用户单击 Toast 之外的任何位置，此代码将关闭 Toast：

import { Toast } from "react-bootstrap";
import { useState, useRef, useEffect } from "react";

export default function App() {
  const [show, setShow] = useState(true);

  function useOutsideAlerter(ref) {
    useEffect(() => {
      /**
       * Close toast if clicked on outside of element
       */
      function handleClickOutside(event) {
        if (ref.current && !ref.current.contains(event.target)) {
          setShow(false);
        }
      }
      // Bind the event listener
      document.addEventListener("mousedown", handleClickOutside);
      return () => {
        // Unbind the event listener on clean up
        document.removeEventListener("mousedown", handleClickOutside);
      };
    }, [ref]);
  }

  const wrapperRef = useRef(null);
  useOutsideAlerter(wrapperRef);

  return (
    <div className="App">
      <Toast
        onClose={() => setShow(false)}
        data-testid="toast"
        show={show}
        delay={10000}
        autohide
        ref={wrapperRef}
      >
        <Toast.Header closeButton={false}>
          <div>Toast title</div>
          <div onClick={() => setShow(false)}>Close button</div>
        </Toast.Header>
        <Toast.Body>Body text</Toast.Body>
      </Toast>
    </div>
  );
}

包含更多信息的原始帖子：link

【讨论】：