如何将 class 组件中的 setState 重写为功能组件中的 useState ？

Question

我想在我的 React 项目中使用这个颜色选择器 https://casesandberg.github.io/react-color/#about

这是来自文档的示例

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

class Component extends React.Component {
  state = {
    background: '#fff',
  };

  handleChangeComplete = (color) => {
    this.setState({ background: color.hex });
  };

  render() {
    return (
      <SketchPicker
        color={ this.state.background }
        onChangeComplete={ this.handleChangeComplete }
      />
    );
  }
}

但它是 class 组件。我在我的项目中使用了 useState。其中之一是

const [projectColor, setProjectColor] = useState("#F9A8D4");

使用默认选择的颜色。 如何重写此 class 示例以与 usestate 一起使用？ 我不明白...

onChangeComplete={ this.handleChangeComplete }

类似于setState？这个颜色变量来自哪里？

handleChangeComplete = (color) => {
    this.setState({ background: color.hex });
  };

这是我的完整代码（我不知道传递给 setProjectColor 的是什么）。 colors 是一个数组，里面有可供选择的颜色，color 是默认选择的颜色。

const [projectColor, setProjectColor] = useState("#F9A8D4");
  const colors = [
    "#FECACA",
    "#F9A8D4",
    "#FDE68A",
    "#A7F3D0",
    "#BFDBFE",
    "#E5E7EB",
  ];

  const colorPicker = () => {
    return (
      <div className="p-4">
        <CirclePicker
          colors={colors}
          color={projectColor}
          onChangeComplete={(e) => setProjectColor(projectColor)}
        />
      </div>
    );
  };

Answer 1

你只需要使用onChangeComplete回调的color对象：

onChangeComplete={(color) => setProjectColor(color.hex)

完整示例：

const [projectColor, setProjectColor] = useState("#F9A8D4");

return (
  <div className="p-4">
    <CirclePicker
      colors={colors}
      color={projectColor}
      onChangeComplete={(color) => setProjectColor(color.hex)}
    />
  </div>
);

Answer 2

您可以重写您的函数：

 handleChangeComplete = (color) => {
    this.setState({ background: color.hex });
  };

进入：

const handleChangeComplete = React.useCallback((color) => setProjectColor(color), []);

如何将 class 组件中的 setState 重写为功能组件中的 useState ？

How to rewrite setState from class component to useState in functional component?

color-picker

reactjs

react-hooks

use-state