Reactjs 为什么我的反应颜色弹出窗口没有更新？

我试图创建一个按钮，弹出一个react color

SketchPicker

组件（类似于中列出的第一个示例）。但是，当我打开弹出窗口并在

SketchPicker

中拖动选择器时，UI中的颜色不会更新，选择器也不会移动

我已经仔细阅读了我的组件，我没有发现任何一个方面有错误；我只是更新了

更多示例中的第一个组件，以利用
useState

为什么会这样

您需要将颜色属性传递给SketchPicker组件，还需要添加一个onChange处理程序，以便在移动光标时，该处理程序触发，并且它可以访问选定的颜色，您可以更新状态变量并将该状态变量传递给颜色属性

import React, { useState } from "react";
import "./ColorSelector.css";
import { SketchPicker } from "react-color";

const ColorSelector = () => {
  const [display, setDisplay] = useState(false);
  const [color, setColor] = useState({
    r: "241",
    g: "112",
    b: "19",
    a: "1"
  });
  const onClickMethod = () => {
    setDisplay(!display);
  };

  const onCloseMethod = () => {
    setDisplay(false);
  };

  const onChangeMethod = (color) => {
    setColor({ ...color.rgb });
  };

  const popover = {
    position: "absolute",
    zIndex: "3"
  };

  const cover = {
    position: "fixed",
    top: "0px",
    right: "0px",
    bottom: "0px",
    left: "0px"
  };

  return (
    <div>
      <a className="colorSelector" onClick={onClickMethod}>
        select color
      </a>
      {display ? (
        <div style={popover}>
          <div style={cover} onClick={onCloseMethod} />
          <SketchPicker color={color} onChange={onChangeMethod} />
        </div>
      ) : null}
    </div>
  );
};

export default ColorSelector;

import React，{useState}来自“React”；
导入“/ColorSelector.css”；
从“反应颜色”导入{SketchPicker}；
常量颜色选择器=（）=>{
const[display，setDisplay]=useState（false）；
const[color，setColor]=useState({
r:“241”，
g:“112”，
b:“19”，
a:“1”
});
const onClickMethod=（）=>{
setDisplay（！display）；
};
const onCloseMethod=（）=>{
设置显示（假）；
};
const onChangeMethod=（颜色）=>{
setColor（{…color.rgb}）；
};
常数popover={
位置：“绝对”，
zIndex：“3”
};
常数覆盖={
位置：“固定”，
顶部：“0px”，
右：“0px”，
底部：“0px”，
左：“0px”
};
返回(
选择颜色
{显示(
)：null}
);
};
导出默认颜色选择器；
您需要有一个处理程序来处理颜色变化的时间，并将当前颜色存储在状态中。看看这里的示例（它是基于类的，但可以转换为函数）：啊哈。这是有道理的。我想我读书时可能不小心。虽然我现在发现组件的拖动方面不起作用；它仅在拖动结束时更新。