基于react的颜色拾取器（react-color）

官方文档：http://casesandberg.github.io/react-color/#api-onChangeComplete

组件的封装：

let React = require('react');
import { SketchPicker } from 'react-color';
export default class ColorSelect extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color:props.color,
      key:props.objKey,
      displayColorPicker: "none",
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick = ()=> {
    let {displayColorPicker,key,color} =this.state;
    displayColorPicker = displayColorPicker=="none"?"block":"none";
    this.setState({displayColorPicker})
    if(displayColorPicker){
        this.props.updateColor(key,color)
    }
  }
  handleChange = (value)=>{
      let color = value.hex;
      this.setState({color})
    
  }
  render() {
      let {color,displayColorPicker} = this.state;
    return (
      

         //button色块样式
        {displayColorPicker=="block"?
        
 //是选择器脱离标准流
            
        
        :null
        }
      
    );
  }
}

组件的使用：

import ColorSelect from './ColorPicker'