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?
}

原文由 Scott Kingdon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

currentTarget 已经正确输入。

If you read the definitions of React’s event types you can see that MouseEvent extends SyntheticEvent , which extends BaseSyntheticEvent , which includes the property target 和 currentTarget 等。您提供的 HTMLElement 类型将应用于 currentTarget ，因此您可以访问所有正确的内容。如果你使用 target 你会得到一个关于 getAttribute not being valid for type EventTarget 的编译错误。

有什么不同？

currentTarget 是您放置处理程序的元素 onClick 。 target 是事件最初的来源（ 更多信息在这里）。这不一定相同，因为事件会冒泡。请参阅 类型定义文件中引用的 PR ，以完整讨论为什么它们的类型不同。

原文由 Chris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您很可能必须使用 as syntax ，具体取决于您要访问 e.target 上的哪个属性。

 handleAppModeClick(e: React.MouseEvent) {
    const appMode = (e.target as HTMLButtonElement).getAttribute('data-appMode');
}

原文由 givehug 发布，翻译遵循 CC BY-SA 4.0 许可协议