react的click事件的ts类型？

Question

<div data-disabled={true} onClick={this.handleClick} />

handleClick = (e: React.MouseEvent)=>{
    // 这里提示没有dataset字段，但实际是有的
    console.log(e.target.dataset.disabled);
}

请问要如何才能不报dataset字段找不到

Answer 1

首先，给React.MouseEvent提供绑定的元素的类型参数，比如你绑定的是div元素，那么类型参数就是HTMLDivElement。如果你希望绑定不只div元素，可以考虑指定所有html元素的父类型HTMLElement。

然后，获取当前事件的元素应该用currentTarget，而不是target。

因此，修改后结果如下。

handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
  console.log(e.currentTarget.dataset);
}