Палитра цветов из react-color не работает должным образом

Question

Я использую response-color и этот учебник для реализации ChromePicker.

Как я ожидаю, это сработает:

• откройте ChromePicker
• выберите цвет с помощью полосы тона и / или «большого квадрата»
• после закрытия ChromePicker Я хочу обновить значение цвета для объекта, который находится на реквизите

Пока это работает так:

• открывается при нажатии кнопки
• выбор цвета не работает должным образом. Когда я нажимаю на оттенок и перетаскиваю этот маленький кружок в сторону, цвет меняется (я знаю это, потому что есть this.state.color), но круг остается в том же положении. Кроме того, я ожидал загрузить на «большой квадрат» цветовую палитру now, но она этого не делает. Если я нажимаю на квадрат, чтобы выбрать цвет, он работает аналогично полосе оттенка. Круг остается в том же положении, даже если значение изменяется.
• значение сохраняется, но также не работает нормально: этот запрос вызывается несколько раз при каждом изменении цвета. Я хочу, чтобы это изменилось только после того, как я выберу цвет и выйду из ChromePicker (щелкнув где-нибудь за его пределами), и я подумал, что onChangeComplete сделает это.

Вот скриншот it:

Why is the ChromePicker so badly? Is there a way to solve it? And also, I would like to save the new color on Company only after the ChromePicker is closed (it seems that onChangeComplete is not triggered by that)

This is the code:

 import React from 'react';
    import { Button, Icon } from 'semantic-ui-react';
    import { ChromePicker } from 'react-color';
    import { connect } from 'react-redux';
    import { Creators } from '../../actions';
    
    
    class Banner extends React.PureComponent {
      constructor(props) {
        super(props);
        this.state = {
          displayColorPicker: false,
        };
      }
    
      handleClick = () => {
        this.setState({ displayColorPicker: true });
      };
    
      handleClose = () => {
        this.setState({ displayColorPicker: false });
      };
    
      handleChangeComplete = colors => {
        const {
          name,
          color,
        } = this.state;
        this.setState({ color: colors.hex });
        const { updateCompany } = this.props; // company is the entity from props that is updated
                                              // it contains 2 values, its name and its color
        updateCompany(this.props.company._id, {
          name,
          color,
        });
      };
    
    
    
      render() {
        this.props.color.color.color = this.state.color;
        const popover = { // this is not essential, it's some styling for the picker
          position: 'absolute',
          zIndex: '2',
        };
        const cover = { // same as for popover
          position: 'fixed',
          top: '0px',
          right: '0px',
          bottom: '0px',
          left: '0px',
        };
        const {company } = this.props; // gets the company from props
        return (
           // приведенный ниже div с его стилем обновляется в реальном времени при изменении цвета Выберите цвет  {this.state.displayColorPicker? ( ): нуль}   ); }} const mapStateToProps = state => ({компания: state.companies.selectedCompany,}); const mapDispatchToProps = {updateCompany: Creators.updateCompanyRequest,}; экспортировать соединение по умолчанию (mapStateToProps, mapDispatchToProps) (Баннер); 

Answer 1

Чтобы ChromePicker работал (перемещая полосу тона и круг внутри «большого квадрата», необходимо добавить функцию onChange и приклеить ее к onHandleChange.

Также внутри onHandleChangeComplete, цвет должен быть взят не из состояния, а из параметра функции, colors:

import React from 'react'; import {Button, Icon} из 'semanti c -ui-react '; импортировать {ChromePicker} из' response-color '; импортировать {connect} из' response-redux '; импортировать {Creators} из' ../../actions';

class Banner extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      displayColorPicker: false,
    };
  }

  handleClick = () => {
    this.setState({ displayColorPicker: true });
  };

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

  handleChange2 = colors => {
    this.setState({ background: colors.hex });
 };

  handleChangeComplete = colors => {
    this.setState({ background: colors.hex });
    const {
      name,
    } = this.state;
    const color = colors.hex;
    this.setState({ color: colors.hex });
    const { updateCompany } = this.props;                                           
    updateCompany(this.props.company._id, {
      name,
      color,
    });
  };



  render() {
    this.props.color.color.color = this.state.color;
    const popover = { // this is not essential, it's some styling for the picker
      position: 'absolute',
      zIndex: '2',
    };
    const cover = { // same as for popover
      position: 'fixed',
      top: '0px',
      right: '0px',
      bottom: '0px',
      left: '0px',
    };
    const {company } = this.props; // gets the company from props
    return (
      <div className="banner-container settings-banner">   
              <div style={{ backgroundColor: this.state.color }}>              
                <div>
                  <Button
                    className="select-color-btn"
                    onClick={this.handleClick}>
                    Select a color
                  </Button>
                  {this.state.displayColorPicker ? (
                    <div style={popover}>
                      <div
                        style={cover}
                        onClick={this.handleClose}
                        onKeyDown={this.handleClick}
                        role="button"
                        tabIndex="0"
                        aria-label="Save"
                      />
                      <ChromePicker
                        color={this.state.background}
                        onChange={this.handleChange2} 
                        onChangeComplete={this.handleChangeComplete}
                      />
                    </div>
                  ) : null}
                </div>
              </div>
        
      </div>
    );
  }
}

const mapStateToProps = state => ({
  company: state.companies.selectedCompany,
});

const mapDispatchToProps = {
  updateCompany: Creators.updateCompanyRequest,
};

export default connect(mapStateToProps, mapDispatchToProps)(Banner);