React，onMouseEnter 事件触发所有项目而不是一个悬停？

Question

我现在有两张卡片，当我将鼠标悬停在一张卡片上时，它会在所有两张卡片上触发悬停 (onMouseEnter) 这是我的解决方案

import React, { useState } from "react";

const Buttons = () => {

  const [isShown, setIsShown] = useState(false);

  return (
    <div>
      <div
        onMouseEnter={() => setIsShown(true)}
        onMouseLeave={() => setIsShown(false)}
        className="wrapper-btn"
      >
        {isShown && <button> test 1 </button>}
      </div>
      <div
        onMouseEnter={() => setIsShown(true)}
        onMouseLeave={() => setIsShown(false)}
        className="wrapper-btn"
      >
        {isShown && <button> test 2 </button>}
      </div>
    </div>
  );
};

export default Buttons;

这里有什么问题？

Answer 1

两者共享相同的状态，您可以将代码抽象到另一个组件中，每个组件都有一个独立的状态：

import React, { useState } from "react";

const Buttons = () => {
  return (
    <div>
      <ButtonDisplay btnContent='test 1' />
      <ButtonDisplay btnContent='test 2' />
    </div>
  );
};

export default Buttons;

const ButtonDisplay = ({ btnContent }) => {
  const [isShown, setIsShown] = useState(false);

  return (
    <div
      onMouseEnter={() => setIsShown(true)}
      onMouseLeave={() => setIsShown(false)}
      className="wrapper-btn"
    >
      {isShown && <button> { btnContent } </button>}
    </div>
)}

这将是我将采用的方法，因为它可以让您的代码保持干燥。

可能的其他方法会将isShown 状态更改为跟踪每个按钮isShown 状态的数组，其中onMouseEnter|Leave 将更新该数组的特定索引并从该数组读取，因此您将呈现基于按钮根据您所在州的索引中的特定值。或者您可以为每个按钮创建一个状态，当您有多个按钮时，这将是最不理想的。