javascript - 如何通过 API 调用设置颜色选择器的背景颜色？

Question

我正在尝试通过 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}
/>

MyColorPicker 的代码：

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;

关于如何前进的任何想法？谢谢！

标签： javascriptreactjs

Answer 1

据我了解，您想传递MyBlockPicker从 api 获得的背景颜色并将其设置为BlockPicker颜色。When BlockPickerselects a new color then fire the event onChangeCompleteto pass the new selected color to Main componentusing the setSelectedColor().

所以我添加了两种方法changeSelectedColorOne() and 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}
        />
    </>
    );
}

MyBlockPicker 组件

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;