如何让 React.js TypeScript 在 'event.target' 上通过 onKeyDown 事件接受 'parentElement'？

Question

我有一个用 React TypeScript 构建的特殊可访问元素，我正在尝试定义键来导航它并能够在 table 元素中聚焦。它是专门为屏幕阅读器构建的...但是我似乎无法理解这些类型。

我无法摆脱以下错误：

属性 'parentElement' 在类型 'EventTarget'.ts(2339)

上不存在

这是我要声明的函数：

 const keyDownHandler = (event: React.KeyboardEvent) => {
    event.preventDefault();

    if (event.key === "ArrowLeft") {
      (event.target.parentElement.nextElementSibling.firstElementChild as HTMLButtonElement).focus();
    }
    if (event.key === "ArrowUp") {
      console.log("keys.up");
    }
    if (event.key === "ArrowRight") {
      console.log("keys.right");
    }
    if (event.key === "ArrowDown") {
      console.log("keys.down");
    }
  };

我也试过用“！”强制输入作为

event.target.parentElement!.nextElementSibling.firstElementChild.focus();

（这些<td><button></button></td>在<tr/>中并排放置）

这是我的渲染方式：

 <table role="presentation" onKeyDown={keyDownHandler}>
        <DaysHeading />
        <DatesOfMonth
          year={dateObject.year}
          month={dateObject.month}
          datesOfMonth={dateObject.dates}
          setClickedDate={setClickedDate}
        />
      </table>

我错过了什么？

Answer 1

这是因为 TypeScript 将 event.target 视为 EventTarget 类型而不是 HTMLElement 类型。您可以通过将 event.target 强制转换为 HTMLElement 类型来解决此问题。

const keyDownHandler = (event: React.KeyboardEvent) => {
        event.preventDefault();
    
        if (event.key === "ArrowLeft") {
          const eventTarget: HTMLElement = event.target;
          (eventTarget.parentElement.nextElementSibling.firstElementChild as HTMLButtonElement).focus();
        }
        if (event.key === "ArrowUp") {
          console.log("keys.up");
        }
        if (event.key === "ArrowRight") {
          console.log("keys.right");
        }
        if (event.key === "ArrowDown") {
          console.log("keys.down");
        }
      };

Answer 2

只是想分享一下在我的例子中，它通过执行以下操作来工作：

const clicksHandler = (e: React.TouchEvent) => {
    const eventTarget = e.target as HTMLElement;
    const parentElement = eventTarget.parentElement as HTMLDivElement;
    ...
  };

您可以将 e: React.TouchEvent 更改为 e: React.MouseEvent

如何让 React.js TypeScript 在 'event.target' 上通过 onKeyDown 事件接受 'parentElement'？

How can I get React.js TypeScript to accept 'parentElement' on 'event.target' with a onKeyDown event?

javascript

focus

typescript

reactjs