Reactjs 按Escape键取消材质UI工具提示

我正在一个应用程序中研究可访问性，WCAG的一个要求是工具提示可以随esc一起取消。这在材质UI组件中不自动可用。我知道这是真的，但在升级到新版本之前（我们现在使用的是v4.5.2），我被要求找到一个解决方法

我已经研究过使用

并在

中添加

onKeyPressed

，但这两种方法似乎都不起作用

我的代码在下面

import React from 'react';
import { Tooltip } from '@material-ui/core';

const AccessibleTooltip = (tooltipText, tooltipPlacement, innerElement) => (
  <Tooltip
    interactive
    arrow
    title={tooltipText}
    placement={tooltipPlacement}
    aria-label={tooltipText}
  >
    {innerElement}
  </Tooltip>
);

export default AccessibleTooltip;

从“React”导入React；
从“@material ui/core”导入{Tooltip}；
常量AccessibleTolTip=（tooltipText、tooltipPlacement、innerElement）=>(
{innerElement}
);
导出默认的AccessibleTooltip；

---

我对反应和材料还比较陌生，因此如果您控制

工具提示的打开状态，您可以轻松地使用一些指导/指针

const AccessibleTooltip = (props) => {
  const { text, ...rest } = props;
  const [open, setOpen] = React.useState(false);
  const onOpen = () => setOpen(true);
  const onClose = () => setOpen(false);

  const handler = React.useCallback((e) => {
    console.log("keydown", e.key);
    if (e.key === "Escape") {
      onClose();
    }
  }, []);

  useEventListener("keydown", handler);

  return (
    <Tooltip
      open={open}
      onOpen={onOpen}
      onClose={onClose}
      interactive
      arrow
      title={text}
      aria-label={text}
      {...rest}
    />
  );
};

现场演示

function useEventListener(eventName, handler, element = window) {
  const savedHandler = React.useRef();

  React.useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  React.useEffect(() => {
    const isSupported = element && element.addEventListener;
    if (!isSupported) return;

    const eventListener = (event) => savedHandler.current(event);

    element.addEventListener(eventName, eventListener);

    return () => {
      element.removeEventListener(eventName, eventListener);
    };
  }, [eventName, element]);
}