React表格悬停图标onClick事件失效问题求助

问题根源 #

你遇到的核心问题是直接通过innerHTML插入ReactDOMServer.renderToString生成的HTML字符串。renderToString仅能产出静态HTML代码，这些插入的DOM节点不在React虚拟DOM的管控范围内，React的合成事件（比如onClick）无法被绑定到这些节点上，自然不会触发你定义的回调函数。

解决方案 #

改用React状态来控制悬停内容的显示，完全通过React的虚拟DOM渲染流程处理，避免手动操作DOM。

具体步骤

1. 用useState存储当前处于悬停状态的item ID（或索引）
2. 修改鼠标事件回调，仅更新悬停状态
3. 在表格最后一列，根据悬停状态条件渲染图标或日期

修改后的完整代码 #

import styles from './ItemsList.module.scss';
import '../../../styles/buttons.scss';
import { useState } from 'react';

const ItemsList = () => {
  const dispatch = useDispatch();
  // 存储当前悬停的item ID，初始为null
  const [hoveredItemId, setHoveredItemId] = useState(null);

  const handleOpenDeleteItemModal = () => {
    dispatch(SET_DELETE_ITEM_MODAL(true));
    dispatch(SET_SIDEBAR(false));
  };

  // 鼠标进入时记录当前item的ID
  const handleMouseEnter = (itemId) => {
    setHoveredItemId(itemId);
  };

  // 鼠标离开时清空悬停状态
  const handleMouseLeave = () => {
    setHoveredItemId(null);
  };

  return (
    <div className={styles.list__table}>
      {!isLoading && items.length === 0 ? (
        <p>No items found, please add an item.</p>
      ) : (
        <table>
          <thead>
            <tr>
              <th>Number</th>
              <th>Name</th>
              <th>Category</th>
              <th>Price</th>
              <th>Quantity</th>
              <th>Value</th>
              <th>Date</th>
            </tr>
          </thead>
          <tbody>
            {currentItems.map((item, index) => {
              const { _id, name, category, price, quantity, createdAt } = item;
              const isHovered = hoveredItemId === _id;
              return (
                <tr
                  onMouseEnter={() => handleMouseEnter(_id)}
                  onMouseLeave={handleMouseLeave}
                  key={_id}
                >
                  <td>{index + 1 + '.'}</td>
                  <td>{shortenText(name, 15)}</td>
                  <td>{category}</td>
                  <td>£{price}</td>
                  <td>{quantity}</td>
                  <td>£{price * quantity}</td>
                  <td>
                    {/* 根据悬停状态切换显示内容 */}
                    {isHovered ? (
                      <>
                        <BiMessageSquareEdit className={styles.list__icons} />
                        <BsTrash
                          className={styles.list__icons}
                          onClick={handleOpenDeleteItemModal}
                        />
                      </>
                    ) : (
                      <Moment format="DD/MM/YY">{createdAt}</Moment>
                    )}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      )}
    </div>
  );
};

方案优势 #

• 完全遵循React数据流和虚拟DOM机制，事件会被正确注册触发
• 避免手动操作DOM带来的DOM不一致、内存泄漏等潜在问题
• 代码结构更清晰，符合React开发范式，易于维护

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