React TypeScript 从点击事件中获取数据属性

Question

所以我有一个带有按钮的 React 组件，它有一个使用 data-* 属性的点击处理程序。如果这是直接 React 那么我知道如何从 data-* 属性中获取值。但是我正在学习如何使用 TypeScript，所以我不知道如何访问这个属性。那么使用 TypeScript 访问 data-* 属性的最佳方法是什么？

这是我的按钮的 JSX 代码：

<button type="button" className="NavLink" data-appMode={ AppMode.MAIN } onClick={ this.handleAppModeClick.bind(this) }>Main</button>

这是我的点击事件处理程序：

handleAppModeClick(e: React.MouseEvent<HTMLElement>) {
    // What code should go here to access the data-appMode attribute?
}

Answer 1

使用 e.currentTarget然后使用 HTML 标准方法getAttribute。不需要强制。

const appMode = e.currentTarget.getAttribute('data-appmode');

（注意属性名称中的小写，以避免反应警告）

currentTarget 已经正确输入。

如果您阅读React 事件类型的定义，您可以看到MouseEventextends SyntheticEvent，它 extends BaseSyntheticEvent，其中包括属性targetandcurrentTarget等。HTMLElement您提供的类型将应用于currentTarget，因此您可以访问所有正确的内容。如果你使用，target你会得到一个关于getAttribute对 type 无效的编译错误EventTarget。

有什么不同？

的currentTarget就是你把你的处理元素，onClick。这target是事件最初的来源（更多在这里）。这不一定相同，因为事件会冒泡。请参阅类型定义文件中引用的PR，以获取有关为什么它们的类型不同的完整讨论。