React.js中点击元素时如何获取对应完整对象数据

嘿，我来帮你搞定这个问题！你现在的核心问题是点击人物元素时拿不到对应的完整对象，本质是没把当前遍历到的obj传递给点击事件函数。下面给你两种实用的解决思路：

方法一：直接传递对象（React中最推荐的方式） #

这种方式简单直观，直接把当前循环到的对象作为参数传给点击事件函数就行：

首先修改你的loopData方法，调整onClick的写法：

loopData = () => {
  return data.map((obj, i) => {
    // 用箭头函数包裹showme，把当前obj作为参数传进去
    return (
      <h1 onClick={() => this.showme(obj)} key={i}>
        {obj.name} - {obj.age}
      </h1>
    )
  })
}

然后更新showme函数，接收这个对象参数：

showme = (personObj) => {
  console.log(personObj); // 这里就能打印出包含name、age、weight的完整对象啦！
}

点击每个<h1>元素时，对应的完整对象就会被传递到showme里，直接打印就能看到所有属性。

方法二：通过DOM的data属性存储对象（备选方案） #

如果你希望从DOM元素本身获取数据，可以把对象序列化为字符串存在data-*自定义属性里，之后在点击事件中解析出来：

修改loopData方法：

loopData = () => {
  return data.map((obj, i) => {
    return (
      <h1 
        onClick={this.showme} 
        key={i}
        data-person={JSON.stringify(obj)} // 将对象转为字符串存入data属性
      >
        {obj.name} - {obj.age}
      </h1>
    )
  })
}

然后更新showme函数，通过事件对象获取并解析数据：

showme = (event) => {
  // 把data属性里的字符串转回对象
  const personObj = JSON.parse(event.target.dataset.person);
  console.log(personObj);
}

关于你问的「若信息已存在，该在哪个标签下查找？」 #

如果用第二种方法，你可以打开浏览器开发者工具，点击对应的<h1>标签，在Elements面板的Attributes区域找到data-person属性，里面就是序列化后的对象字符串。不过第一种方法不需要从DOM查找，对象直接通过参数传递，在showme函数里就能直接拿到。

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