React/Next.js中无法读取闪卡dataset值问题求助

问题根源 #

你遇到的dataset.keyMatch或getAttribute返回null的核心原因是：点击事件的e.target指向的可能不是绑定data-key-match属性的<div>元素。比如点击闪卡内的文本内容时，e.target会指向文本节点（而非外层div），而文本节点没有dataset或getAttribute方法，自然返回null。

解决方案 #

方案1：用e.currentTarget替代e.target

currentTarget始终指向绑定事件处理函数的元素（也就是你的闪卡div），不受点击位置影响：

const handleToggle = function (e: any) {
  // 方式1：通过dataset读取
  const matchId = e.currentTarget.dataset.keyMatch;
  // 方式2：通过getAttribute读取
  // const matchId = e.currentTarget.getAttribute("data-key-match");
  console.log(matchId);
};

同时确保事件直接绑定在闪卡div上：

<div 
  key={props.id} 
  data-key-match={props.matchId}
  onClick={handleToggle}
>
  {props.language}
</div>

方案2：直接传递matchId（更贴合React思维）

既然你能正常读取props.matchId，完全可以跳过DOM属性，直接在事件触发时把值传递给处理函数：

<div 
  key={props.id} 
  onClick={() => handleToggle(props.matchId)}
>
  {props.language}
</div>

对应的处理函数修改为：

const handleToggle = function (matchId: string | number) {
  console.log(matchId);
};

这种方式不需要依赖DOM操作，能彻底避免事件目标指向错误的问题，也更符合React的组件开发逻辑。

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