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

最新推荐文章于 2024-09-03 17:53:02 发布

FE-Dong

最新推荐文章于 2024-09-03 17:53:02 发布

阅读量1.5w

点赞数 1

分类专栏： javascript react

本文链接：https://blog.csdn.net/Dong8508/article/details/83650486

版权

本文介绍了如何基于React封装和使用颜色拾取器组件，参考了官方文档http://casesandberg.github.io/react-color/#api-onChangeComplete，详细阐述了组件的封装过程和使用方法。

摘要由CSDN通过智能技术生成

官方文档：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 =