基于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 (<div><button onClick={ this.handleClick } style={{background:color,border:"none",lineHeight:"31px",height:31,width:45,verticalAlign: "middle"}}></button> //button色块样式{displayColorPicker=="block"?<div style={{position:"absolute",zIndex:66}}> //是选择器脱离标准流<SketchPicker color={this.state.color}  onChange={this.handleChange} /></div>:null}</div>);}
}

组件的使用：

import ColorSelect from './ColorPicker'<ColorSelect style={{ verticalAlign: "middle" }}color={useContent[key].color} //编辑的时候，用于颜色的回显objKey = {key} //因页面多次使用，传入key值，用于区分色块更新，因key是关键字，这里使用了objKey作为属性名                                                                          updateColor = {this.updateColor} //传入父组件方法，更新颜色的拾取                                                                        ></ColorSelect>

基于react的颜色拾取器（react-color）相关推荐

颜色拾取器color picker (javascript version)
颜色拾取器 216种web safe color的构造方法 var cl = ['00','33','66','99','CC','FF']; var clist = []; for( ...
html5 url颜色,HTML5input新增type属性color颜色拾取器的实例代码
type 属性规定 input 元素的类型.本文较详细的给大家介绍了HTML5 input新增type属性color颜色拾取器的实例代码,感兴趣的朋友跟随脚本之家小编一起看看吧定义和用法 type ...
html中input的color,怎么使用html5中input的color颜色拾取器?使用方法分享！
从事编程方面类的小伙伴们都知道时不时更新换代是我们习以为常的家常便饭对于程序员来说,那么今天我们就来说说:"怎么使用html5中input新增type属性color颜色拾取器?"这 ...
用 WPF 写的颜色拾取器
之前都是用别人的颜色拾取器,今天自己用WPF写了一个颜色拾取器小程序拾取鼠标所在位置的颜色,按键盘上的空格键停止取色程序下载:MyWPFScreenColorE.rar 程序里面有一个全局的勾子实 ...
Winform中实现颜色拾取器获取RGB与16进制颜色程序与源码分享
场景效果实现关键代码 using System; using System.Collections.Generic; using System.ComponentModel; using Sys ...
VS编程，WPF中，通过telerik控件创建颜色选择器，颜色拾取器，调色板的一种方法
这里展示使用telerik控件时,调用颜色调色板,颜色选择器,颜色拾取器的一种方法 1.增加引用 2.前台定义引用 xmlns:telerik="http://schemas.teleri ...
在线颜色拾取器 - 资源篇
在线颜色拾取器 - 资源篇点击访问资源: 在线颜色拾取器截图示下:
windows（C语言版）——颜色拾取器
2019独角兽企业重金招聘Python工程师标准>>> 这段时间一直有看<windows程序设计>,通过C语言调用windows API,这并不是件轻松的事,window ...
Pickr.js响应式颜色拾取器插件
下载地址 Pickr是简单的响应式颜色拾取器插件,可删节拾色.它没有依赖关系,兼容所有的CSS框架比如Bootstrap.主要特色简单的使用没有依赖关系多种颜色表示颜色比较不透明度控制支持触摸设备轻量 ...

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

基于react的颜色拾取器（react-color）相关推荐

最新文章

热门文章