如何在触发onMouseEnter事件时修改Ant Design图标的twoToneColor

你的问题核心在于用普通变量管理颜色状态——React不会追踪普通JavaScript变量的变化，就算你在onHover里修改了warnColor和deleteColor的值，组件也不会触发重渲染，图标自然不会更新颜色。

要搞定这个问题，我们需要用React的useState Hook来管理颜色状态，状态变化时React会自动重新渲染组件，让图标颜色同步更新。

修正后的完整代码 #

import React, { useState } from 'react';
import { DeleteTwoTone, WarningTwoTone, EditTwoTone } from '@ant-design/icons';

const iconStyle = { fontSize: '18px' };
const defaultColor = '#d9d9d9';

export const Control = ({ className, onClick }) => {
  // 用useState创建带更新函数的状态变量
  const [warnColor, setWarnColor] = useState(defaultColor);
  const [deleteColor, setDeleteColor] = useState(defaultColor);

  // 鼠标进入警告图标时设置高亮色
  const handleWarnEnter = () => {
    setWarnColor('#ffe58f');
  };

  // 鼠标离开警告图标时恢复默认色
  const handleWarnLeave = () => {
    setWarnColor(defaultColor);
  };

  // 鼠标进入删除图标时设置高亮色
  const handleDeleteEnter = () => {
    setDeleteColor('#ff4d4f');
  };

  // 鼠标离开删除图标时恢复默认色
  const handleDeleteLeave = () => {
    setDeleteColor(defaultColor);
  };

  return (
    <div className={className}>
      <WarningTwoTone
        twoToneColor={warnColor}
        style={iconStyle}
        onMouseEnter={handleWarnEnter}
        onMouseLeave={handleWarnLeave}
      />
      <EditTwoTone twoToneColor={defaultColor} style={iconStyle} />
      <DeleteTwoTone
        twoToneColor={deleteColor}
        style={iconStyle}
        onMouseEnter={handleDeleteEnter}
        onMouseLeave={handleDeleteLeave}
      />
    </div>
  );
};

关键细节说明 #

• useState的作用：它会创建一个绑定了更新函数的状态变量，当调用更新函数（比如setWarnColor）时，React会感知到状态变化，自动触发组件重渲染，把新的颜色值传递给图标。
• 补充onMouseLeave事件：为了让鼠标离开图标时恢复默认颜色，完善交互体验，我们添加了对应的离开事件处理。
• 拆分逻辑：把原来的通用onHover拆成单独的处理函数，代码更清晰，后续维护也更方便。

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