Reactjs 如何在colorpicker中使用选定颜色制作div

对于我的应用程序，我使用react颜色选择器。我必须创建add按钮，当用户单击该按钮时，它需要用所选颜色显示div（className是保存的颜色占位符）。因此，div的背景必须类似于选定的颜色。在函数saveColor中，我将颜色推送到一个空数组中

这是我的密码

class Colorpicker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      displayColorPicker: false,
      color: {
        r: '0',
        g: '0',
        b: '0',
        a: '1',
      },
      colorHex: "#000",
      savedColors: []
    };
  }
  handleClick = () => {
    this.setState({ displayColorPicker: !this.state.displayColorPicker })
  };

  handleClose = () => {
    this.setState({ displayColorPicker: false })
  };

  handleChange = (color) => {
    this.setState({ color: color })
    console.log(color)
  };
  saveColor = (color) => {
    let savedColorsArray = this.state.savedColors;
    savedColorsArray.push(this.state.color)
    this.setState({
      savedColors: savedColorsArray
    })
    console.log(this.state.savedColors)
  }
  render() {

    const styles = reactCSS({
      'default': {
        color: {
          width: '31px',
          height: '31px',
          borderRadius: '20px',
          background: `rgba(${this.state.color.r}, ${this.state.color.g}, ${this.state.color.b}, ${this.state.color.a})`,
        },
        popover: {
          position: 'absolute',
          zIndex: '2',
        },
        savedColor: {
          width: '28px',
          height: '28px',
          borderRadius: '14px',
          marginRight: '8px',
          background: `rgba(${this.state.color.r}, ${this.state.color.g}, ${this.state.color.b}, ${this.state.color.a})`
        }
      },
    });
    return (
      <div className="text-color-container ">
        <div className="selected-color-content">
          <div className="hex-placeholder">
            <p>{this.state.colorHex}</p>
          </div>
          <div className="switch" onClick={this.handleClick}>
            <div style={styles.color} />
          </div>
          {
            this.state.displayColorPicker ?
              <div className="wrapper">
                    <div style={styles.popover}>
                      <div style={styles.cover} onClick={this.handleClose} />
                      <SketchPicker color={this.state.color}  onChange={this.handleChange} />
                      <div className="saved-colors">
                        <span >Saved colors</span>
                        <div className="painted-colors">
                          <button onClick={this.saveColor} className="btn-save-color">Add</button>
                          <span slassName="saved-color-placeholder">
                            <div style={styles.savedColor}/>
                          </span>
                        </div>
                      </div>
                  </div>
              </div>
              :
              null
          }
        </div>
      </div>
    )
  }
}

export default Colorpicker

类颜色选择器扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
displayColorPicker:false，
颜色：{
r:'0'，
g:'0'，
b:‘0’，
a:‘1’，
},
colorHex:#000“，
保存的颜色：[]
};
}
handleClick=（）=>{
this.setState（{displayColorPicker:！this.state.displayColorPicker}）
};
handleClose=（）=>{
this.setState（{displayColorPicker:false}）
};
handleChange=（颜色）=>{
this.setState（{color:color}）
console.log（彩色）
};
保存颜色=（颜色）=>{
让savedColorsArray=this.state.savedColors；
savedColorsArray.push（this.state.color）
这是我的国家({
savedColors:savedColorsArray
})
console.log（this.state.savedColors）
}
render（）{
constyles=css({
“默认值”：{
颜色：{
宽度：“31px”，
高度：“31px”，
边界半径：“20px”，
背景：`rgba（${this.state.color.r}，${this.state.color.g}，${this.state.color.b}，${this.state.color.a}）`，
},
流行音乐：{
位置：'绝对'，
zIndex:'2'，
},
保存颜色：{
宽度：“28px”，
高度：'28px'，
边界半径：“14px”，
marginRight:'8px'，
背景：`rgba（${this.state.color.r}，${this.state.color.g}，${this.state.color.b}，${this.state.color.a}）`
}
},
});
返回(
{this.state.colorHex}

{
这个.state.displayColorPicker？
保存的颜色
添加
:
无效的
}
)
}
}
导出默认颜色选择器

我不确定这是不是最好的解决方案，但我认为这已经足够好了。 可以在样式道具中使用阵列。所以你可以做的是：

<div style={[styles.savedColor,{backgorundColor: selectedColor}]>

---

希望这会有所帮助。

问题到底是什么？我的意思是，

不是已经做过了吗？工作，但当我点击添加btn不保存。我必须这样做