React中li元素点击事件TypeScript报错：Property 'dataset'不存在于EventTarget类型

这个问题是因为TypeScript无法确定点击事件的目标元素具体类型，默认的EventTarget类型太宽泛，不包含dataset属性。下面是两种可行的解决方法：

方法一：给MouseEvent指定元素类型泛型（推荐） #

直接在React.MouseEvent后加上<HTMLLIElement>，明确事件绑定的是列表项元素，同时建议用currentTarget代替target——因为target可能是<li>内部的子元素（比如如果里面嵌套了<span>），而currentTarget永远指向绑定事件的那个<li>元素，更可靠：

const handleAutoCompleteClick = (e: React.MouseEvent<HTMLLIElement>) => {
  setInputs((inputs) => ({ ...inputs, food: e.currentTarget.dataset.id }));
};

方法二：使用类型断言 #

如果需要兼容更复杂的DOM结构，也可以手动把e.target断言为HTMLLIElement：

const handleAutoCompleteClick = (e: React.MouseEvent) => {
  const liElement = e.target as HTMLLIElement;
  setInputs((inputs) => ({ ...inputs, food: liElement.dataset.id }));
};

内容的提问来源于stack exchange，提问作者rgc998