因此，我有一个带有按钮的React组件，该按钮具有一个使用data- *属性的单击处理程序。如果这是直接的React，那么我知道如何从data- *属性获取值。但是，我正在学习如何使用TypeScript，所以我不知道如何访问该属性。那么，使用TypeScript访问data- *属性的最佳方法是什么？
这是我的按钮的JSX代码：
<button type="button" className="NavLink" data-appMode={ AppMode.MAIN } onClick={ this.handleAppModeClick.bind(this) }>Main</button>
这是我的click事件处理程序：
handleAppModeClick(e: React.MouseEvent<HTMLElement>) {
// What code should go here to access the data-appMode attribute?
}
使用e.currentTarget，然后使用HTML标准方法getAttribute。无需强制。
const appMode = e.currentTarget.getAttribute('data-appmode');
（请注意属性名称中的小写字母，以避免引起警告）
currentTarget 已经正确输入。如果您阅读了React事件类型的定义，那么您会看到MouseEventextends SyntheticEvent，extends BaseSyntheticEvent，其中包括属性target和currentTarget。HTMLElement您提供的类型将应用于currentTarget，因此您可以访问所有正确的内容。如果您使用target，则会收到有关getAttribute对type无效的编译错误EventTarget。
的currentTarget就是你把你的处理元素，onClick。该target事件的原始来源（此处有更多信息）。这不一定相同，因为事件冒泡了。有关为什么键入不同的内容的完整讨论，请参见类型定义文件中引用的PR。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句