Javascript 单击AwayListener不'；单击链接/按钮以导航到其他路线时不会触发

我正在使用MaterialUI ClickAwayListener组件和使用react路由器的现有代码。该按钮位于<代码>之外onClickAway会开火。但事实并非如此

下面是我的代码的复制，在某种程度上证明了我的意思

函数组件（）{
常量handleClickAway=（）=>{
//在这里做点什么
}
返回(
点击这里
//这里还有其他因素
//内容
)
}

我可以通过使用此功能而不是材料界面ClickAwayListener来解决此问题：

此处提供了一个正在使用的钩子示例：

2019年9月，在中打开了一个与您的问题相关的链接，其中Clickawaylistener不会同时触发按钮和链接。然而，直到2020年5月，这一问题似乎还没有得到充分解决。我建议在存储库中打开一个新问题，以确认这不是与按钮相关的bug

同时，作为一种潜在的解决方法，根据您的用例，您可以将

或

组件与

onClick

属性一起使用：

import React from "react";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import { Link, useHistory } from "react-router-dom";
import Button from "@material-ui/core/Button";

export default function Home() {
  let history = useHistory();

  const handleClickAway = () => {
    console.log("Clicked Away");
  };

  function handleClick() {
    handleClickAway();
    history.push("/about");
  }

  return (
    <div>
      <Link to="/about" onClick={handleClickAway}>
        Link
      </Link>
      <Button type="button" onClick={handleClick}>
        Button
      </Button>
      <ClickAwayListener onClickAway={handleClickAway}>
        <div>Home Page</div>
      </ClickAwayListener>
    </div>
  );
}

从“React”导入React；
从“@material ui/core/ClickAwayListener”导入ClickAwayListener；
从“react router dom”导入{Link，useHistory}；
从“@物料界面/核心/按钮”导入按钮；
导出默认函数Home（）{
让历史=使用历史（）；
常量handleClickAway=（）=>{
console.log（“点击离开”）；
};
函数handleClick（）{
handleClickAway（）；
历史。推（“/about”）；
}
返回(
链接
按钮
主页
);
}

我还包括了一个关于Codesandbox的工作示例

---

ClickAwayListener

组件通过将事件侦听器附加到的方式工作，当鼠标事件触发时，它仅在鼠标事件不在元素内时才会触发

onClickAway

react router dom

中的组件基本上呈现如下内容：

---

为什么文档处理程序仅在下次重新渲染后处理？我认为它应该是导航之前的进程，因为它是本机事件处理程序。
const on = (obj: any, ...args: any[]) => obj.addEventListener(...args);
const off = (obj: any, ...args: any[]) => obj.removeEventListener(...args);

import React from "react";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import { Link, useHistory } from "react-router-dom";
import Button from "@material-ui/core/Button";

export default function Home() {
  let history = useHistory();

  const handleClickAway = () => {
    console.log("Clicked Away");
  };

  function handleClick() {
    handleClickAway();
    history.push("/about");
  }

  return (
    <div>
      <Link to="/about" onClick={handleClickAway}>
        Link
      </Link>
      <Button type="button" onClick={handleClick}>
        Button
      </Button>
      <ClickAwayListener onClickAway={handleClickAway}>
        <div>Home Page</div>
      </ClickAwayListener>
    </div>
  );
}