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

我映射了数组以在我的页面上接收卡片。然后 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>
  )
  
}

回答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>
  )
}

相似文章

最新文章