Javascript 如何从API调用设置颜色选择器的背景色？

我试图从一个API调用中为两个颜色选择器设置背景颜色值

我知道我在做这件事的过程中显然有些不对劲，但我无法思考如何正确设置背景色，以便在颜色选择器中显示

我的主要组件代码：

useEffect(() => {
  getDataFromApi(props.id).then((rsp) => {
    setFields({
      colorOne: rsp.info?.colorOne,
      colorTwo: rsp.info?.colorTwo,
    });
  });
});

const [fields, setFields] = useState({
  colorOne: "",
  colorTwo: "",
});

// I want colorOne to be pre-populated here
<MyColorPicker
  setSelectedColor={setSelectedBackground}
  background={setSelectedBackground}
/>

// I want colorTwo to be pre-populated here
<MyColorPicker
  setSelectedColor={setSelectedTitleColor}
  background={setSelectedTitleColor}
/>

import React from "react";
import { BlockPicker } from "react-color";

class MyBlockPicker extends React.Component {
  state = {
    background: this.props.background,
  };

  handleChangeComplete = (color) => {
    console.log(color);
    this.setState({ background: color.hex });
    this.props.setSelectedColor(color.hex);
  };

  render() {
    return (
      <BlockPicker
        color={this.state.background}
        onChangeComplete={this.handleChangeComplete}
        triangle="hide"
      />
    );
  }
}

export default MyBlockPicker;

useffect（（）=>{
getDataFromApi（props.id）。然后（（rsp）=>{
设定场({
colorOne:rsp.info？.colorOne，
colorTwo:rsp.info？.colorTwo，
});
});
});
const[fields，setFields]=useState({
色酮：“，
颜色二：“，
});
//我想在这里预先填充colorOne
//我想在这里预先填充colorTwo

MyColorPicker的代码：

useEffect(() => {
  getDataFromApi(props.id).then((rsp) => {
    setFields({
      colorOne: rsp.info?.colorOne,
      colorTwo: rsp.info?.colorTwo,
    });
  });
});

const [fields, setFields] = useState({
  colorOne: "",
  colorTwo: "",
});

// I want colorOne to be pre-populated here
<MyColorPicker
  setSelectedColor={setSelectedBackground}
  background={setSelectedBackground}
/>

// I want colorTwo to be pre-populated here
<MyColorPicker
  setSelectedColor={setSelectedTitleColor}
  background={setSelectedTitleColor}
/>

import React from "react";
import { BlockPicker } from "react-color";

class MyBlockPicker extends React.Component {
  state = {
    background: this.props.background,
  };

  handleChangeComplete = (color) => {
    console.log(color);
    this.setState({ background: color.hex });
    this.props.setSelectedColor(color.hex);
  };

  render() {
    return (
      <BlockPicker
        color={this.state.background}
        onChangeComplete={this.handleChangeComplete}
        triangle="hide"
      />
    );
  }
}

export default MyBlockPicker;

从“React”导入React；
从“反应颜色”导入{BlockPicker}；
类MyBlockPicker扩展React.Component{
状态={
背景：this.props.background，
};
handleChangeComplete=（颜色）=>{
控制台。日志（颜色）；
this.setState（{background:color.hex}）；
this.props.setSelectedColor（color.hex）；
};
render（）{
返回(
);
}
}
导出默认MyBlockPicker；

---

关于如何前进有什么想法吗？谢谢

据我所知，您希望将从api获得的背景色传递给

MyBlockPicker

并将其设置为

BlockPicker

color。当

BlockPicker

选择一种新颜色时，然后使用

setSelectedColor（）

触发事件

onChangeComplete

，将新选择的颜色传递给

主组件

因此，我添加了两种方法
changeSelectedColorOne（）和changeSelectedColorTwo（）
，它们将带来新的选定颜色并更改
colorOne/two
。试试下面的代码，让我知道

主要成分

//if you use react class then you cannot use `useState` and `useEffect`
constructor(props:any){
  super(props);
  this.state = {
   colorOne:"",
   colorTwo:""
  }
}

componentDidMount = () =>{
    getDataFromApi(props.id).then((rsp) => { 
         this.setState({colorOne: rsp.info?.colorOne, colorTwo: rsp.info?.colorTwo});
    });
}

render = () => {
    return (
    <>
        // I want colorOne to be pre-populated here
        <MyColorPicker
          setSelectedColor={this.changeSelectedColorOne}
          background={colorOne}
        />

        // I want colorTwo to be pre-populated here
        <MyColorPicker
          setSelectedColor={this.changeSelectedColorTwo}
          background={colorTwo}
        />
    </>
    );
}

import React from "react";
import { BlockPicker } from "react-color";

class MyBlockPicker extends React.Component<{setSelectedColor:any},{}> {
  
  constructor(props:any){}      

  handleChangeComplete = (color) => {
    console.log(color);
    this.props.setSelectedColor(color.hex);
  };

  render() {
    return (
      <BlockPicker
        color={this.props.background}
        onChangeComplete={this.handleChangeComplete}
        triangle="hide"
      />
    );
  }
}

export default MyBlockPicker;

//如果使用react类，则不能使用'useState'和'useEffect'`
构造器（道具：任何）{
超级（道具）；
此.state={
色酮：“，
颜色二：“
}
}
componentDidMount=（）=>{
getDataFromApi（props.id）.then（（rsp）=>{
这个.setState（{colorOne:rsp.info？.colorOne，colorTwo:rsp.info？.colorTwo}）；
});
}
渲染=（）=>{
返回(
//我想在这里预先填充colorOne
//我想在这里预先填充colorTwo
);
}

MyBlockPicker组件

//if you use react class then you cannot use `useState` and `useEffect`
constructor(props:any){
  super(props);
  this.state = {
   colorOne:"",
   colorTwo:""
  }
}

componentDidMount = () =>{
    getDataFromApi(props.id).then((rsp) => { 
         this.setState({colorOne: rsp.info?.colorOne, colorTwo: rsp.info?.colorTwo});
    });
}

render = () => {
    return (
    <>
        // I want colorOne to be pre-populated here
        <MyColorPicker
          setSelectedColor={this.changeSelectedColorOne}
          background={colorOne}
        />

        // I want colorTwo to be pre-populated here
        <MyColorPicker
          setSelectedColor={this.changeSelectedColorTwo}
          background={colorTwo}
        />
    </>
    );
}

import React from "react";
import { BlockPicker } from "react-color";

class MyBlockPicker extends React.Component<{setSelectedColor:any},{}> {
  
  constructor(props:any){}      

  handleChangeComplete = (color) => {
    console.log(color);
    this.props.setSelectedColor(color.hex);
  };

  render() {
    return (
      <BlockPicker
        color={this.props.background}
        onChangeComplete={this.handleChangeComplete}
        triangle="hide"
      />
    );
  }
}

export default MyBlockPicker;

从“React”导入React；
从“反应颜色”导入{BlockPicker}；
类MyBlockPicker扩展React.Component{
构造函数（props:any）{}
handleChangeComplete=（颜色）=>{
控制台。日志（颜色）；
this.props.setSelectedColor（color.hex）；
};
render（）{
返回(
);
}
}
导出默认MyBlockPicker；
检查
getDataFromApi
是否返回任何数据。还应在
MyBlockPicker
中的
constructor
中放置状态，读取您正在传递的
setSelectedTitleColor
而不是传递十六进制值。用于从api检索数据的
props.id
是什么？如果
Main
组件是React类，则不能使用
useState
和
useffect
。它们仅用于功能组件。如果我的答案解决了您的问题，请接受它。