React Color 不允许更改颜色

Question

我正在为我的项目使用 React Color。所以我将示例中的 ChromePicker 添加到代码中。

单击按钮时，会显示选取器，当在其外部单击时，选取器会关闭。到目前为止一切顺利，按预期工作。

但是，如果我尝试更改颜色，移动渐变下方的圆圈或条形，则没有任何动作，它们不会移动。我不知道为什么会这样。

这是我的代码：

import React from 'react';
import { Button } from 'semantic-ui-react';
import { ChromePicker } from 'react-color';

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

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

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

  render() {
    const popover = {
      position: 'absolute',
      zIndex: '2',
    };
    const cover = {
      position: 'fixed',
      top: '0px',
      right: '0px',
      bottom: '0px',
      left: '0px',
    };

    return ( 
       <div>
        ...//some other code
        <div>
          <Button onClick={this.handleClick}>Pick 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 />
            </div>
          ) : null}
        </div>
      </div>
    );
  }
}

Answer 1

import React from 'react';
import { SketchPicker } from 'react-color';

class Component extends React.Component {
  state = {
    background: '#fff',
  };

  handleChangeComplete = (color) => {
    this.setState({ background: color.hex });
  };

  render() {
    return (
      <SketchPicker
        color={ this.state.background }
        onChangeComplete={ this.handleChangeComplete }
      />
    );
  }
}

我想你应该使用 onChangeComplete 道具，你可以找到更多信息 here

Answer 2

这个问题可能会回答您的问题：https://github.com/casesandberg/react-color/issues/717

版本 2.17 和 2.18 之间发生了一些变化，您需要降级或制作受控组件。

React Color 不允许更改颜色

React Color doesn't let to change the color

javascript

reactjs

redux

react-redux

react-color