Как сделать div с выбранным цветом в colorpicker - PullRequest
Новая
       23

Как сделать div с выбранным цветом в colorpicker

0 голосов
/ 05 июля 2019

Для моего приложения я использую палитру реагирующих цветов https://casesandberg.github.io/react-color. Я должен сделать кнопку добавления, и когда пользователь нажимает на эту кнопку, он должен показать 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

1 Ответ

0 голосов
/ 05 июля 2019

Я не уверен, что это лучшее решение, но я думаю, что оно может быть достаточно хорошим.Вы можете использовать массивы внутри вашего стиля поддержки.Так что вы могли бы сделать: 

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

Надеюсь, это поможет.

...