React中使用useRef获取数组映射后点击的对应元素问题

你遇到的问题核心在于单个useRef无法存储多个DOM元素：当你在map循环里把所有卡片的ref都赋值给同一个elementRef时，每次循环都会覆盖之前的引用，最终elementRef.current只会保留最后一个卡片的DOM节点，所以点击任意按钮都只能拿到最后一个元素。

下面给你两种可行的解决方案：

方案一：使用useRef存储ref数组（推荐用于需要操作DOM的场景） #

通过useRef创建一个数组容器，将每个卡片的DOM元素分别存入数组的对应索引位置，点击时通过索引获取目标元素：

import { useRef } from "react";
const arr = [22, 45, 56]
export default function AccessingElement() {
  // 初始化一个空数组的ref，用于存储所有卡片的DOM元素
  const elementRefs = useRef([]);
  
  function handleClick(index) {
    // 根据点击按钮对应的索引，取出对应的卡片元素
    console.log(elementRefs.current[index]);
  }

  return (
    <div className='main'>
      {arr.map((item, index) => (
        <div 
          key={item} 
          // 用回调ref将当前卡片的DOM元素存入数组对应位置
          ref={el => elementRefs.current[index] = el}
        >
          <h1>here i am {item}</h1>
          <div>
            <div>
              {/* 点击时传递当前卡片的索引 */}
              <button onClick={() => handleClick(index)}>click</button>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

关键说明： #

• 给列表中的每个元素添加key属性是React列表渲染的强制要求，这里用item作为key（确保数组中元素唯一）。
• 回调式ref会在组件挂载/更新时触发，能准确将每个卡片的DOM元素存入数组的对应索引位置。

方案二：直接传递对应数据（无需操作DOM时使用） #

如果你只是需要获取点击卡片对应的item值而非DOM元素，可以直接在点击事件中传递item：

import { useRef } from "react";
const arr = [22, 45, 56]
export default function AccessingElement() {
  function handleClick(item) {
    console.log("当前点击的卡片数据：", item);
  }

  return (
    <div className='main'>
      {arr.map(item => (
        <div key={item}>
          <h1>here i am {item}</h1>
          <div>
            <div>
              <button onClick={() => handleClick(item)}>click</button>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

这种方式更简洁，适合只需要数据而非DOM操作的场景。

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