如何让 React.js TypeScript 接受带有 onKeyDown 事件的“event.target”上的“parentElement”？

Question

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

我无法摆脱以下错误：

“EventTarget”类型上不存在属性“parentElement”。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");
        }
      };