时间戳

首页 > 解决方案 > 将鼠标悬停在 X 上时，如何仅在单个列表中显示 X？

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

问题描述

当我要悬停在单个列表中时，我遇到了这个问题。当我悬停它时，我只想在一个列表上显示 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;

在此处输入图像描述

标签： javascripthtmlcssreactjsredux

解决方案

在每个项目中，您都应该有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>

推荐阅读