自定义 React-Color 组件在更新颜色时中断

Question

我正在尝试使用 React-Color 实现自定义颜色选择器，但遇到了障碍。

您可以在此处查看我的问题的简化示例：
https://codesandbox.io/s/react-color-multiple-custom-pickers-q0eiq

初始状态正确，但一旦我尝试与组件交互，整个事情就会爆炸。看起来我正在设置的新状态缺少一堆原始属性，我不知道为什么。

我对 React 非常陌生...

[编辑]

已将主要 link 更新为最终工作版本。特别感谢@ravibagul91 帮助我解决了这个问题。

Answer 1

您应该将 key 发送到 onChange 处理程序以更新状态中的相应键，

<div style={{ position: "relative", zIndex: 0 }}>
    <div style={{
          height: "100px",
          width: "100px",
          position: "relative",
          float: "left",
          zIndex: 1000000
        }}>
        <Saturation hsl={swatch.hsl} hsv={swatch.hsv} onChange={(e)=> handleChange(e, 'hsv')} /> //Provide key to update
    </div>
    <div style={{
          marginLeft: "10px",
          height: "100px",
          width: "10px",
          position: "relative",
          float: "left",
          zIndex: 1000000
        }}>
        <Hue hsl={swatch.hsl} direction="vertical" onChange={(e)=> handleChange(e,'hsl')} /> //Provide key to update
    </div>
    <EditableInput value={swatch.hex} onChange={(e)=> handleChange(e, 'hex')} /> //Provide key to update
</div>

您的更改处理程序应该是这样的，

const handleChange = (c, key) => {
  setSwatch(l => ({...l , [key]: c}))
};

终于可以看到变化了，

useEffect (() => {
  console.log(swatch)
},[swatch])

自定义 React-Color 组件在更新颜色时中断

Custom React-Color component breaks on updating color

reactjs

react-color