Question

对于我的应用程序，我使用反应颜色选择器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

Answer 1

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

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

希望这会有所帮助。

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

1 个答案: