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

问题描述

我想在我的 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 }
      />
    );
  }
}

但它是类组件。我的项目中有 useState 的功能。其中之一是

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

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

onChangeComplete={ this.handleChangeComplete }

就像setState？这个颜色变量是从哪里来的？

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

这是我的完整代码（我不知道传递给 setProjectColor 的是什么）。 颜色是可以选择颜色的数组，颜色是默认选择的颜色。

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>
    );
  };

解决方法

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

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>
);

,

你可以重写你的函数：

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

进入：

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