如何在映射数组后使用 useRef 选择确切的项目

Question

我映射数组以在我的页面上接收卡片。然后 onClick 我想得到他们中的每一个。这样我只得到最后一个“56”。我怎样才能得到我点击的那个？

import { useRef } from "react";

const arr = [22, 45, 56]

export default function AccessingElement() {
  const elementRef = useRef();

  function Click() {
     
    console.log(elementRef.current);
  }

  return (

    <div className='main'>
      {arr.map(item => (

        <div ref={elementRef}>
          <h1>here i am {item}</h1>
          <div>
            <div>
              <button onClick={(elementRef)=>Click()}>click</button>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
  
}

Answer 1

elementRef 只能引用一个元素，在你的例子中它只引用 arr 的最后一个元素。您需要每张卡都有自己的 useRef。有一个单独的 Card 组件和它自己的 useRef 是可行的。

import { useRef } from "react";

const arr = [22, 45, 56]

export default function AccessingElement() {
  return (
    <div className='main'>
      {arr.map(item => <Card key={item} item={item} />)}
    </div>
  )
}

const Card = ({ item }) => {
  const elementRef = useRef();
  function Click() {
    console.log(elementRef.current);
  }
  return (
    <div ref={elementRef}>
      <h1>here i am {item}</h1>
      <div>
        <div>
          <button onClick={Click}>click</button>
        </div>
      </div>
    </div>
  )
}

如何在映射数组后使用 useRef 选择确切的项目

How to pick exact item after array was mapped, using useRef

reactjs

use-ref