javascript - 来自 react 颜色的颜色选择器无法正常工作

Question

我正在使用 react-color和 this tutorial实现 ChromePicker。

我如何期待它的工作:

• 打开 ChromePicker
• 使用色相条和/或“大方 block ”选择一种颜色
• 在 ChromePicker 关闭后，我想更新 props 上对象的颜色值

到目前为止它是这样工作的:

• 点击按钮时打开
• 无法正常选择颜色。当我单击色调并将那个小圆圈向侧面拖动时，颜色会发生变化(我知道这一点是因为有一个 this.state.color)但圆圈保持相同的位置。另外，我希望在“大方 block ”上加载现在的调色板，但它没有这样做。如果我在正方形中单击以选择一种颜色，它的工作方式类似于色相条。即使值发生变化，圆圈仍保持在同一位置。
• 该值已保存，但也无法正常工作:每次更改颜色时都会多次调用该请求。我希望它仅在我选择一种颜色并退出 ChromePicker(通过单击它外面的某处)后才更改，我认为 onChangeComplete 会这样做。

截图如下:

为什么 ChromePicker 这么烂？有办法解决吗？而且，我想仅在 ChromePicker 关闭后才将新颜色保存在 Company 上(似乎 onChangeComplete 不会由此触发)

这是代码:

 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 className="banner-container settings-banner">   
     
      //the below div with its style is updating in real time when the color is changed 
                  <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.props.company.color}
                            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);

Answer 1

为了使 ChromePicker 工作(移动色相条和“大方 block ”内的圆圈，必须添加 onChange 函数并将其粘附到 onHandleChange。

此外，在 onHandleChangeComplete 中，颜色不能从状态中获取，而是从函数的参数 colors 中获取:

从“ react ”中导入 react ；从 'semantic-ui-react' 导入 { Button, Icon }；从“ react 颜色”导入 { ChromePicker }；从'react-redux'导入{connect}；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 });
  };

  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);