所以我有一个带有按钮的 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?
}
使用 e.currentTarget然后使用 HTML 标准方法getAttribute。不需要强制。
const appMode = e.currentTarget.getAttribute('data-appmode');
（注意属性名称中的小写，以避免react警告）
currentTarget 已经正确输入。如果你阅读React 事件类型的定义，你会看到MouseEventextends SyntheticEvent，它 extends BaseSyntheticEvent，其中包括属性targetandcurrentTarget等等。HTMLElement您提供的类型将应用于currentTarget，因此您可以访问所有正确的内容。如果你使用target你会得到一个关于getAttribute对 type 无效的编译错误EventTarget。
的currentTarget就是你把你的处理元素，onClick。这target是事件最初的来源（更多在这里）。这不一定相同，因为事件会冒泡。请参阅类型定义文件中引用的PR，以获取有关为什么它们的类型不同的完整讨论。
您很可能必须使用assyntax ，具体取决于您要在 e.target 上访问的属性。
handleAppModeClick(e: React.MouseEvent) {
const appMode = (e.target as HTMLButtonElement).getAttribute('data-appMode');
}
使用typescript，我最近了解到以下方法：
type TabsProps = {
activeTab: string,
items: string[],
setActiveTab: (i: string) => void,
}
const Tabs = ({ items, activeTab, setActiveTab }: TabsProps) => {
const onClick: React.MouseEventHandler<HTMLElement> = (e) => {
setActiveTab(e.currentTarget.dataset.id)
//console.log(e) // <a data-id="0" class="active nav-link">Info</a>
}
return (
<Nav tabs >
{
items.map((x, i) => (
<NavItem key={i}>
<NavLink className={activeTab === i.toString() ? 'active' : ''} onClick={onClick} data-id={i}>{x}</NavLink>
</NavItem>
))
}
</Nav >
);
}
在您的事件函数中，您有 e 变量，e 表示通过单击按钮触发的事件，e 具有目标属性，因此，为了从元素访问属性，您应该执行以下操作：
handleAppModeClick(e: React.MouseEvent<HTMLElement>) {
const target = e.target as HTMLElement;
let attr = target.getAttribute("data-attribute-name-here");
//do something
}