外部点击事件监听器不工作：Reactjs

Question

我正在实施一个从右侧打开的自定义侧面板。我可以通过单击按钮实现面板的显示和隐藏。但是当我点击外部时，我希望隐藏同样的东西。我附加了外部点击处理程序，当我这样做时它甚至没有出现。有人可以帮忙吗

https://codesandbox.io/s/react-sliding-pane-v2-4xuj57?file=/src/SlideDrawer.jsx:100-173

import React, { useRef, useCallback, useEffect } from "react";
import "./styles.css";

export default function SlideDrawer({ show, setDrawerOpen }) {
  const sideMenuRef = useRef(null);

  const onOutsideClick = useCallback(() => {
    setDrawerOpen(false);
  }, [setDrawerOpen]);

  useEffect(() => {
    document.addEventListener("click", onOutsideClick);
    return () => document.removeEventListener("click", onOutsideClick);
  }, [onOutsideClick]);

  return (
    <div ref={sideMenuRef} className={`panel ${show && "slidein"}`}>
      I am sliding
    </div>
  );
}

import React, { useState } from "react";
import ReactDOM from "react-dom";
import SlideDrawer from "./SlideDrawer.jsx";
import "./styles.css";

function App() {
  const [drawerOpen, setDrawerOpen] = useState(false);

  return (
    <div className="box">
      <SlideDrawer show={drawerOpen} setDrawerOpen={setDrawerOpen} />
      <button onClick={() => setDrawerOpen((prev) => !prev)}>Click me!</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

怎么了：

如果单击该按钮，drawerOpen 将设置为 true 并立即再次设置为 false。您可以通过添加来验证

  React.useEffect(() => {
    console.log(drawerOpen)
  }, [drawerOpen])

到 index.js。

要解决此问题，您需要检查点击是否针对您的 eventListener 中的按钮。

您可以通过给按钮一个 id 来解决它：

      <button id="openPanelButton" onClick={() =>setDrawerOpen((prev) => !prev)}>Click me!</button>

然后像这样检查点击：

import React, { useRef, useCallback, useEffect } from "react";
import "./styles.css";

export default function SlideDrawer({ show, setDrawerOpen }) {
  const sideMenuRef = useRef(null);

  const handleClick = useCallback((event) => {
    if (event.target.id !== "openPanelButton" && event.target !== sideMenuRef.current) {
      setDrawerOpen(false);
    }
  }, [setDrawerOpen]);

  useEffect(() => {
    document.addEventListener("click", handleClick);
    return () => document.removeEventListener("click", handleClick);
  }, [handleClick]);

  return (
    <div ref={sideMenuRef} className={`panel ${show && "slidein"}`}>
      I am sliding
    </div>
  );
}

Answer 2

要实现所需的行为，您需要将要查找的事件从“单击”更改为“鼠标按下”，如下所示：

document.addEventListener("mousedown", onOutsideClick);

这样，同一次点击就不会同时触发打开和关闭。

同时更新打开抽屉的 onClick 并检查它是否已经打开。

这样它会起作用