React开发：如何实现hover单条列表项时仅在当前项显示X按钮

你代码中声明的over是List组件的全局公共状态，所有列表项都复用这一个状态控制X按钮的显隐，自然会触发一处hover所有项都显示X的问题。

方案1：纯CSS实现（更推荐） #

完全不需要修改JS逻辑，也不需要额外维护状态，性能最优，只需要在你的list.css中添加如下样式：

/* 默认隐藏关闭按钮 */
.item-name .close-x {
  display: none;
}
/* 仅当前hover的列表项显示关闭按钮 */
.item-name:hover .close-x {
  display: block;
}

然后修改你的JSX代码，删掉原来的over状态、mouseOver方法以及li上绑定的鼠标事件，将X按钮的p标签修改为：
<p className="close-x">X</p>

方案2：JS状态控制 #

如果有特殊场景需要用JS控制显隐，可以将状态修改为存储当前hover的列表项索引，修改后的完整代码如下：

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

function List({ items }) {
  // 存储当前hover的列表项索引，默认-1表示没有hover任何项
  const [hoverIndex, setHoverIndex] = useState(-1);

  return (
    <ul>
      {items.map((item, i) => {
        return (
          <li
            onMouseOver={() => setHoverIndex(i)}
            onMouseOut={() => setHoverIndex(-1)}
            style={{
              borderRight: `5px solid ${item.amount < 0 ? "red" : "green"}`,
            }}
            key={i}
            className="item-name"
          >
            <p>{item.itemName}</p>
            <p>{item.amount}</p>
            {/* 仅当前索引等于hover索引时显示X */}
            <p style={{ display: hoverIndex === i ? "block" : "none" }}>X</p>
          </li>
        );
      })}
    </ul>
  );
}

export default List;

内容的提问来源于stack exchange，提问作者Muhammad Osama