React 在该 Div 中添加一个类，而不是在其他 Div 中

Question

我是 React 新手，面临一个问题。

我有几个 div，当单击一个 div 时，我只想在这个 div 中添加一个新类。

问题是当我单击一个类时，它会在此 div 中添加一个新类，但它也会在所有其他 div 中添加新类。

请查看下面我的代码并请帮助我。

谢谢

export default function Toggle() {
  const [hoverToggle, setHoverToggle] = useState();
  const toggleIt = () => {
    setHoverToggle(!hoverToggle);
  };
return (
<>
      <div
        onClick={toggleIt}
        className={`${hoverToggle ? "getClick" : "noClick"}`}
      >
        This is DIV 1
      </div>
      <div
        onClick={toggleIt}
        className={`${hoverToggle ? "getClick" : "noClick"}`}
      >
        This is DIV 2 
      </div>
      <div
        onClick={toggleIt}
        className={`${hoverToggle ? "getClick" : "noClick"}`}
      >
        This is DIV 3
      </div>
</>
)

Answer 1

您的变量hoverToggle 与所有div 共享。 也许试试这个:

export default function ParentComponent() {
      const divs = [1,2,3]

    function displayDiv(divNumber) {
     return <div
        onClick={toggleIt}
        className={`${hoverToggle ? "getClick" : "noClick"}`}
      >
        This is DIV {divNumber}
      </div>

   }

    return (
    <>
          {divs.map(divNumber => displayDiv(divNumber))}
          
    </>
    )
}

这样每个创建的 div 都会有其单独的状态。