如何在颜色选择器中使用选定的颜色制作div

时间:2019-07-05 13:14:39

标签: reactjs color-picker

对于我的应用程序,我使用反应颜色选择器https://casesandberg.github.io/react-color。我必须添加按钮,当用户单击此按钮时,它需要显示具有所选颜色的div(className为save-color-placeholder)。因此,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

1 个答案:

答案 0 :(得分:0)

我不确定这是否是最好的解决方案,但我认为它可能已经足够好了。 您可以在样式道具中使用数组。因此,您可以做的是:

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

希望这会有所帮助。