React-color ChromePicker не работает должным образом - PullRequest
Новая
       14

React-color ChromePicker не работает должным образом

1 голос
/ 11 июля 2020

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

Как это должно работать:

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

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

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

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

enter image description here

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) (Баннер);
...