如何让material-ui-color的ColorPicker仅在鼠标松开时触发onChange设置颜色

material-ui-color 提供的 ColorPicker 组件默认设计为拖动选色过程中实时触发 onChange 回调，要实现仅鼠标松开时更新的需求，可通过以下两种稳定方案实现：

方案一：临时状态缓存+鼠标松开事件监听（优先推荐） #

该方案可100%匹配「仅鼠标松开时触发更新」的需求，无额外误触发情况：

• 声明两个状态：tempColor 用于缓存拖动过程中实时变化的颜色，finalColor 为实际业务使用的最终选中颜色
• ColorPicker 的value绑定tempColor，onChange仅更新tempColor，不执行业务逻辑
• 全局监听mouseup事件，触发时将tempColor赋值给finalColor，并执行后续业务逻辑
• 组件卸载时移除全局事件监听，避免内存泄漏

代码示例：

import { useState, useEffect } from 'react';
import { ColorPicker } from 'material-ui-color';

export default function App() {
  // 缓存拖动中临时颜色
  const [tempColor, setTempColor] = useState('#ffffff');
  // 业务层使用的最终颜色
  const [finalColor, setFinalColor] = useState('#ffffff');

  useEffect(() => {
    const handleMouseUp = () => {
      setFinalColor(tempColor);
      // 此处添加颜色更新后的业务逻辑
    };
    document.addEventListener('mouseup', handleMouseUp);
    return () => document.removeEventListener('mouseup', handleMouseUp);
  }, [tempColor]);

  return (
    <div>
      <ColorPicker
        value={tempColor}
        onChange={(color) => setTempColor(color.hex)}
      />
      <p>最终选中颜色：{finalColor}</p>
    </div>
  );
}

方案二：防抖处理（适配轻量场景） #

如果不想引入全局事件监听，可对onChange触发的业务逻辑添加防抖处理，设置200-300ms的延迟，仅当颜色停止变化超过延迟时间后才执行更新。该方案缺点为用户拖动中途暂停且未松开鼠标时，也可能触发更新，准确度略低于方案一。

代码示例（基于lodash的debounce实现，也可自定义防抖函数）：

import { useState, useCallback } from 'react';
import { ColorPicker } from 'material-ui-color';
import { debounce } from 'lodash';

export default function App() {
  const [finalColor, setFinalColor] = useState('#ffffff');

  const handleColorUpdate = useCallback(
    debounce((color) => {
      setFinalColor(color.hex);
      // 此处添加颜色更新后的业务逻辑
    }, 300),
    []
  );

  return (
    <div>
      <ColorPicker
        value={finalColor}
        onChange={handleColorUpdate}
      />
      <p>最终选中颜色：{finalColor}</p>
    </div>
  );
}

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