React TypeScript从Click事件获取数据属性

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>

这是我的click事件处理程序：

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已经正确输入。

如果您阅读the definitions of React's event types，则可以看到MouseEvent扩展了SyntheticEvent，扩展了BaseSyntheticEvent，其中包括属性target和currentTarget等等。您提供的HTMLElement类型将应用于currentTarget，因此您可以访问所有正确的内容。如果您使用target，则会收到有关getAttribute对于类型EventTarget无效的编译错误。

有什么区别？

currentTarget是放置处理程序onClick的元素。 target是事件最初来自（more here）的地方。这不一定相同，因为事件冒泡了。请参阅PR referenced in the type definitions file，以获取有关为什么键入不同的完整讨论。

Answer 2

在事件函数中，您具有e变量，e表示通过单击按钮触发的事件，e具有target属性，以便从元素中访问属性，您应该执行以下操作：

handleAppModeClick(e: React.MouseEvent<HTMLElement>) {
    const target = e.target as HTMLElement;
    let attr = target.getAttribute("data-attribute-name-here");
    //do something

}

Answer 3

您最有可能必须使用as语法，具体取决于您要在e.target上访问哪个属性。

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

Answer 4

最近我使用打字稿了解了以下方法：

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 >
  );
}