带有 useRef 的多个 div

Question

假设我有多个 div，并且每个 div 的操作 onClick 都是相同的。 如何获取已点击的 Ref？

我已经尝试过，但我很挣扎。

import React, { useRef } from "react";
import "./style.css";

export default function App() {
  const Ref1 = useRef();
  const Ref2 = useRef();
  const Ref3 = useRef();

  const Namee = event => {
    let temp = event.currentTarget.id;

    temp == "Ref1" ? (Ref1.current.style.display = "none") : null;
    temp == "Ref2" ? (Ref2.current.style.display = "none") : null;
    temp == "Ref3" ? (Ref3.current.style.display = "none") : null;
  };
  return (
    <>
      <div id="Ref1" ref={Ref1} onClick={Namee} className="icon-wrapper">
        jjjjj
      </div>
      <div id="Ref2" ref={Ref2} onClick={Namee} className="icon-wrapper">
        jeee
      </div>
      <div id="Ref3" ref={Ref3} onClick={Namee} className="icon-wrapper">
        jeee
      </div>
    </>
  );
}

https://stackblitz.com/edit/react-aucoxt

Answer 1

您可以将 ref 传递给 onClick 函数：

import React, { useRef } from "react";
import "./style.css";

export default function App() {
  const Ref1 = useRef();
  const Ref2 = useRef();
  const Ref3 = useRef();

  const Namee = (ref) => ref.current.style.display = "none";

  return (
    <>
      <div id="Ref1" ref={Ref1} onClick={() => Namee(Ref1)} className="icon-wrapper">
        jjjjj
      </div>
      <div id="Ref2" ref={Ref2} onClick={() => Namee(Ref2)} className="icon-wrapper">
        jeee
      </div>
      <div id="Ref3" ref={Ref3} onClick={() => Namee(Ref3)} className="icon-wrapper">
        jeeea
      </div>
    </>
  );
}

编辑：根据您想要实现的目标，您可能还可以使用 useState 挂钩跟踪您的数据，然后对其进行迭代以呈现 div，而不是从一开始就拥有 3 个 div，每个 div 都有一个 ref。 您可以拥有一个对象数组，其键值对“show”为真或假。然后，如果您知道我的意思，您可以根据它渲染您的 div。但我不完全确定你在做什么，所以这可能对你的用例没有意义。