React Hooks中点击心形图标如何获取CSS隐藏span内的邮箱ID

React是数据驱动框架，完全不需要通过获取隐藏DOM元素的内容拿邮箱，直接用渲染时的数据源传递参数即可，实现成本更低、逻辑更稳定。

具体修改步骤 #

1. 修正字段匹配问题 #

你当前模拟数据data1中邮箱字段是email，但JSX中使用的是item.nomineeemail，首先要统一字段：
要么修改模拟数据的字段为nomineeemail，要么将JSX中所有调用邮箱的位置改为item.email，这里我们以修改调用字段为例。

2. 给心形点击事件传递邮箱参数 #

渲染列表遍历每个item时，直接把当前项的邮箱通过参数传入saveLikes方法即可：

<span className="likeButton" onClick={() => saveLikes(item.email)}>
  <HeartIcon />
</span>

3. 原有saveLikes方法无需额外修改 #

你已经定义了saveLikes接收email参数，参数传递正确后，方法内可以直接拿到邮箱值发起请求，不需要任何DOM操作。

（不推荐）操作DOM获取的实现方式 #

如果一定要通过DOM获取隐藏元素内容，可以通过点击事件的事件对象向上查找父节点，再选中对应类名的span取内容：

const saveLikes = (e) => {
  // 拿到当前点击项的父容器
  const recordDom = e.currentTarget.parentElement;
  // 选中隐藏的邮箱span
  const emailSpan = recordDom.querySelector('.emailhide');
  const email = emailSpan.textContent;
  // 后续请求逻辑保持不变
}

注意：该方式依赖DOM结构的稳定性，只要后续调整了节点层级、类名就会失效，因此仅做参考，强烈建议使用第一种数据传参的方案。

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