React组件按钮事件中event.target.dataset返回undefined问题

问题原因 #

1. data属性无法存储对象：HTML的data-*属性仅支持字符串类型，直接给data-value传country对象时，会被强制转为"[object Object]"，后续读取自然无法拿到有效数据。
2. event.target指向不确定：点击按钮时，e.target可能指向按钮内部的文本节点（而非按钮本身），导致读取不到按钮上的dataset。

解决方案 #

方案一：直接在事件处理中传递参数（推荐）

无需依赖dataset，直接将country对象作为参数传给事件处理函数，更符合React开发习惯：

修改组件内的按钮代码：

<button onClick={() => handleButton(country)}> Show details </button>

修改事件处理函数：

const handleButton = (country) => {
  console.log(country); // 直接获取完整的country对象
};

方案二：修复dataset的使用方式（不推荐）

如果一定要用data属性，需要先将对象序列化为JSON字符串，读取时再解析，同时使用e.currentTarget确保获取按钮元素：

修改组件内的按钮代码：

<button data-value={JSON.stringify(country)} onClick={handleButton}> Show details </button>

修改事件处理函数：

const handleButton = (e) => {
  e.preventDefault();
  const { value } = e.currentTarget.dataset; // 用currentTarget确保指向按钮
  const country = JSON.parse(value);
  console.log(country);
};

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