为什么React Color弹窗的SketchPicker选色后UI不更新？

• 最常见的错误：SketchPicker 的 color 属性需要接收包含完整颜色维度的对象（包含 hsv/rgb/hsl/hex 等字段），如果仅将 onChange 回调返回的 hex 字符串存入状态并传给 color 属性，组件内部无法正确计算选择器的坐标位置，就会出现拖动无响应、UI不更新的问题。
• 第二个高频错误：仅绑定了 onChangeComplete 回调，没有绑定实时触发的 onChange 回调。onChangeComplete 仅在拖动结束鼠标松开时触发，拖动过程中不会更新状态，自然看不到实时变化。
• 第三种可能：弹窗容器的事件冒泡被拦截，导致 SketchPicker 内部的鼠标移动事件无法正常触发，这种情况多出现于自定义弹窗组件加了 stopPropagation 相关逻辑。

1. 状态存储完整的颜色对象，不要仅存hex值：

import { useState } from 'react';
import { SketchPicker } from 'react-color';

// 初始值可直接传hex字符串，更新时要存储完整返回对象
const [color, setColor] = useState('#ffffff');

const handleColorChange = (newColor) => {
  // 直接保存onChange返回的完整对象，不要写setColor(newColor.hex)
  setColor(newColor);
}

// 组件调用写法
<SketchPicker 
  color={color}
  onChange={handleColorChange}
/>

2. 确认绑定的是 onChange 回调，如有拖动结束后执行的逻辑可以同时保留 onChangeComplete。
3. 如果使用自定义弹窗组件，检查弹窗根元素是否有拦截 mousemove/mousedown/mouseup 事件冒泡的逻辑，移除相关拦截即可。

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