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

hmae6n7t 于 2023-02-18 发布在 React

关注(0)|答案(3)|浏览(104)

我想在我的React项目www.example.com中使用此颜色选择器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的是什么）。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>
    );
  };

reactjs

来源：https://stackoverflow.com/questions/66570898/how-to-rewrite-setstate-from-class-component-to-usestate-in-functional-component

3条答案

按热度按时间

uttx8gqw1#

您只需要使用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>
);

赞(0）回复(0）举报 2023-02-18

bq8i3lrv2#

您可以重写函数：

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

转换为：

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

赞(0）回复(0）举报 2023-02-18

5rgfhyps3#

您可以将该类重写为下面的代码

import React, { useCallback, useState } from 'react';
import { SketchPicker } from 'react-color';

function FComponent() {
    const [background, setBackground] = useState('#fff');

    const handleChangeComplete = useCallback((color) => {
        setBackground(color.hex);
    }, []);

    return (
        <SketchPicker
            color={background}
            onChangeComplete={handleChangeComplete}
        />
    );
}

对React.Component和React.FunctionalComponent之间差异的一些解释：

React.Component被示例化为一个对象。对象是可变的，当你调用一个方法时，你总是会看到它的所有属性是最新的（当你访问组件的this时，你总是可以看到当前的props和state对象）。状态是内部管理的，你可以用this.setState函数更新它。
React.FunctionalComponent是简单的函数，在它里面声明的所有变量和函数都属于它的作用域（当我们在FC内部使用钩子时非常重要）。状态在函数作用域外部管理，使用useState钩子，它提供了通过每个呈现的可变性。要符合React行为（组件的新属性触发其重新呈现）请勿在FC组件内声明函数，而应使用useCallback挂钩，因为每次渲染都意味着新的函数，并且可能是子组件的无用的重新渲染。

赞(0）回复(0）举报 2023-02-18

我来回答

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

3条答案

相关问题

热门标签

最新问答