Question

我正在使用react-color，并且在跟随this tutorial之后，我实现了一个ChromePicker。

它应该如何工作：

打开ChromePicker
使用色调栏和/或“大方块”选择颜色
关闭ChromePicker后，我想更新道具上的对象的颜色值

到目前为止，它的工作方式如下：

单击按钮会打开
选择颜色无法正常工作。当我单击色相并将该小圆圈向侧面拖动时，颜色正在改变（我知道这是因为存在this.state.color），但是圆圈保持不变。另外，我希望将现在的调色板加载到“大方块”上，但它没有这样做。如果单击正方形以选择一种颜色，则其工作方式类似于色相栏。即使值发生变化，圆也会保持在同一位置。
该值已保存，但也无法正常工作：每次更改颜色时，都会多次调用该请求。我希望仅在选择一种颜色并退出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);

反应色ChromePicker无法正常运行

0 个答案: