React-color: Can not pick a color.

[foreverpinetree]

I upgraded from v2.17.3 to v2.18.1, now I can't pick a color anymore. Tested on the latest Chrome and Firefox.

p.s. I used SketchPicker.

[lborg019]

I had the exact same issue with the out-of-box SketchPicker component.
I was able to get it to work by specifying the component functions:

import { SketchPicker } from 'react-color';

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

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

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

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

and then calling it with

<Component/>

Examples/API helps!

[foreverpinetree]

Thank you. It seems that it only works by manually changing the state. But I think this is also a small issue, because people may only want to use the picker and simply listen to the onChange event.

[lborg019]

I updated the code to also include the handleChangeComplete call and handler. You can customize your listen calls under either of those. onChange calls its handler continuously on drag. onChangeComplete calls its handler once a drag is done. You can test it with a console.log().