当我将鼠标悬停在 X 上时，如何仅在单个列表中显示它？

Question

当我要悬停在单个列表中时，我遇到了问题。当我悬停 X 时，我只想在单个列表中显示它。但是当我将鼠标悬停在一个上时，它会显示在所有的地方。

import React from "react";
import { useState } from "react/cjs/react.development";
import "./list.css";

function List({ items }) {
  const [over, setOver] = useState(false);

  const mouseOver = () => {
    setOver(!over);
  };

  return (
    <ul>
      {items.map((item, i) => {
        return (
          <>
            <li
              onMouseOver={mouseOver}
              onMouseOut={mouseOver}
              style={{
                borderRight: `5px solid ${item.amount < 0 ? "red" : "green"}`,
              }}
              key={i}
              className="item-name"
            >
              <p>{item.itemName}</p>
              <p>{item.amount}</p>
              <p style={{ display: over ? "block" : "none" }}>X</p>
            </li>
          </>
        );
      })}
    </ul>
  );
}

export default List;

Answer 1

在每个项目中，您应该有 over 状态，并且不应为所有项目共享。我是这样写的：

// import React from "react";
// import "./list.css";

const items = [
  { id: 1, amount: 50000, itemName: "Salary" },
  { id: 2, amount: -500, itemName: "Gym" },
  { id: 3, amount: -5000, itemName: "Bill" },
];

const List = () => {
  return (
    <ul>
      {items.map((item) => (
        <ListItem key={item.id} item={item} />
      ))}
    </ul>
  );
}

// export default List;

const ListItem = ({ item }) => {
  const [over, setOver] = React.useState(false);

  const mouseOver = () => {
    setOver(!over);
  };

  return (
    <li
      onMouseOver={mouseOver}
      onMouseOut={mouseOver}
      style={{
        border: "1px solid black",
        borderRight: `5px solid ${item.amount < 0 ? "red" : "green"}`,
      }}
      className="item-name"
    >
      <p>{item.itemName}</p>
      <p>{item.amount}</p>
      <p style={{ display: over ? "block" : "none" }}>X</p>
    </li>
  );
};


ReactDOM.render(<List />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

您遇到此问题是因为所有 li 共享相同的 over 状态。您要么需要以某种方式为每个组件定义一个状态，要么为此使用纯 css - 这是我更喜欢的方法：

纯CSS方法：

.item-name .the-x {
  display: none;
}

.item-name:hover .the-x {
  display: block;
}

并将 X 部分更改为：

<li
    onMouseOver={mouseOver} /* remove this */
    onMouseOut={mouseOver}  /* remove this */
    ...
>
    ...
    <p style={{ display: over ? "block" : "none" }}>X</p> /* remove this */
    <p className="the-x">X</p> /* use this */
    ...
</li>

您可以使用 opacity:0/1 或 visibility:hidden/visible 而不是 display: none/block。使用任何你喜欢的 CSS 属性

当我将鼠标悬停在 X 上时，如何仅在单个列表中显示它？

How can I display the X only in single list when I hover on it?

html

javascript

css

reactjs

redux

纯CSS方法：