列表元素的类型"事件目标"上不存在属性"数据集"

Question

我有一个自动完成组件，它有一个完整的自动完成选项列表。这些选项都在li标记中。当我在CCD_ 3事件中CCD_；列表元素"的类型"EventTarget"上不存在属性"dataset"；。我不太清楚onClick事件类型是什么，那就这样吧。

const handleAutoCompleteClick = (e: React.MouseEvent) => {
setInputs((inputs) => ({ ...inputs, food: e.target.dataset.id }));
};
<li
key={i}
className={i === active ? "active" : ""}
onClick={handleAutoCompleteClick}
data-id={option.id}
>
{option.text}
</li>

Answer 1

• 您需要指定事件是针对HTMLElement的(因为这些元素有数据集(，否则TypeScript将只将其视为Element，而CCD_6可能不会
• 您应该引用e.currentTarget而不是e.target-e.currentTarget将引用侦听器所附加的元素，而不是事件调度到的可能的子代
• 数据集值可能仍然未定义，因此您需要一个非null断言

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

但在React中实现这一点的更好方法不是将数据从React传递到DOM，然后再传递回React，而是通过React的JavaScript单独传递，并带有闭包。

<li
key={i}
className={i === active ? "active" : ""}
onClick={() => {
setInputs((inputs) => ({ ...inputs, food: option.id }));
}}
>
{option.text}
</li>

有时，使用数组索引作为元素的键也是一个坏主意，尤其是在可能添加或删除数组中的项的情况下。因为被迭代的选项有一个id属性，所以如果它是唯一的，可以考虑使用它。

<li
key={option.id}