悬停时如何在一张卡上而不是全部显示数据？

Question

好的，这肯定有一个快速的解决方案，我只是想不通。

只是对我正在尝试做的事情的描述：

每当我将鼠标悬停在某张卡片上时，我都想查看该项目的描述，并且只查看该项目。 但是，正如您从我的代码中看到的那样，显然正在发生的事情是每张卡片描述都在显示。

我通过删除任何不必要的部分重写了一个更简单的代码版本。 一切都正确导入，样式和类名也被删除。

export function Items() {
    const [items, setItems] = useState([])
    const [isHovering, setIsHovering] = useState(false)

    useEffect(() => {
        setItems(Data)
    }, [])
    
    function handleMouseOver() {
        setIsHovering(true)
    }
    function handleMouseOut() {
        setIsHovering(false)
    }

    return(
        <div>
            {items.map(item => {
                return(
                    <Card onMouseOver={handleMouseOver} onMouseOut={handleMouseOut} key={item.id}>
                        {isHovering ? 
                            <Card.Body>
                                <p>{item.item_description}</p>
                            </Card.Body>
                        :
                            <Card.Body>
                            </Card.Body>
                        }
                        <Card.Footer>

                        </Card.Footer>
                    </Card>
                )
            })}
        </div>
    )
}

Answer 1

据我所知，您不需要将此逻辑放入父组件中，而且它使一切变得更加复杂，因为很难管理悬停。 我将创建新的 chlid 组件并在内部管理此状态。

export function Item({item}) {
  const [isHovering, setIsHovering] = useState(false);

  useEffect(() => {
    setItems(Data);
  }, []);

  function handleMouseOver() {
    setIsHovering(true);
  }
  function handleMouseOut() {
    setIsHovering(false);
  }

  return (
    <Card onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
      {isHovering ? (
        <Card.Body>
          <p>{item.item_description}</p>
        </Card.Body>
      ) : (
        <Card.Body></Card.Body>
      )}
      <Card.Footer></Card.Footer>
    </Card>
  );
}

export function Items() {
  const [items, setItems] = useState([]);

  return (
    <div>
      {items.map(item => (
        <Item key={item.id} item={item} />
      ))}
    </div>
  );
}

Answer 2

您的“isHovering”状态也应该是一个数组，您可以在其中存储每张卡片的悬停状态。 然后在悬停时将“isHovering”设置为 true，仅适用于正确的卡片。