如何从KeyDown事件获取元素DOM nodeName？解决TypeScript类型报错

我给Table.Row组件绑定了一个处理KeyDown事件的函数：

<Table.Row
    key={item.id + "-" + index}
    className="align-top"
    onKeyDown={actionOnEnter(() => {
        saveRow(index);
    })}
>

想要在事件函数中获取触发事件元素的nodeName属性，于是编写了如下代码：

export const actionOnEnter = (fn: () => void) => (e: React.KeyboardEvent) => {
    console.log(e.target.nodeName);
    if (e.key === "Enter") {
        e.preventDefault();
        fn();
    }
};

但触发了TypeScript错误：

TS2339: Property 'nodeName' does not exist on type 'EventTarget'

请问应使用何种属性和类型来获取触发事件的节点元素？

TypeScript中EventTarget是通用类型，默认不包含DOM元素专属属性，因此需要通过类型断言或指定具体元素类型来访问nodeName。以下是几种可行方案：

方案1：使用currentTarget并指定元素类型 #

currentTarget始终指向绑定事件的元素（此处为Table.Row对应的<tr>节点），直接为事件指定HTMLTableRowElement类型后，可直接访问其属性：

export const actionOnEnter = (fn: () => void) => (e: React.KeyboardEvent<HTMLTableRowElement>) => {
    console.log(e.currentTarget.nodeName);
    if (e.key === "Enter") {
        e.preventDefault();
        fn();
    }
};

这种方式更可靠，不会受事件冒泡影响，始终指向绑定事件的节点。

方案2：对target进行类型断言 #

若需要获取实际触发事件的子元素（如Table.Row内部的输入框），可将target断言为HTMLElement：

export const actionOnEnter = (fn: () => void) => (e: React.KeyboardEvent) => {
    const target = e.target as HTMLElement;
    console.log(target.nodeName);
    if (e.key === "Enter") {
        e.preventDefault();
        fn();
    }
};

若明确子元素类型，也可断言为更具体的类型（如HTMLInputElement）。

方案3：添加类型守卫（更严谨） #

若不确定target是否为DOM元素，可先做类型检查：

export const actionOnEnter = (fn: () => void) => (e: React.KeyboardEvent) => {
    if (e.target instanceof HTMLElement) {
        console.log(e.target.nodeName);
    }
    if (e.key === "Enter") {
        e.preventDefault();
        fn();
    }
};

内容的提问来源于stack exchange，提问作者Leff