Day14-100React颜色选择器
1.需求在React+AntDesign项目中，需要选择一种颜色。AntDesign没有合适的组件。2、React-color找到了这个插件，每周下载量103w官方给了DemoimportReactfrom'react'importreactCSSfrom'reactcss'import{SketchPicker}from'react-color'classSketchExampleextendsReact.Component{state={displayColorPicker:false,color:{r:'241',g:'112',b:'19',a:'1',},};handleClick=()=>{this.setState({displayColorPicker:!this.state.displayColorPicker})};handleClose=()=>{this.setState({displayColorPicker:false})};handleChange=(color)=>{this.setState({color:color.rgb})};render(){conststyles=reactCSS({'default':{color:{width:'36px',height:'14px',borderRadius:'2px',background:`rgba(${this.state.color.r},${this.state.color.g},${this.state.color.b},${this.state.color.a})`,},样本：{填充：'5px'，背景：'#fff',borderRadius:'1px',boxShadow:'0001pxrgba(0,0,0,.1)',display:'inline-block',cursor:'pointer',},popover:{position:'absolute',zIndex:'2',},cover:{position:'fixed',top:'0px',right:'0px',bottom:'0px',left:'0px',},},});返回(
{this.state.displayColorPicker?
:null}
)}}exportdefaultSketchExample3.实际开发1.我用的是这种格式2.需要把十六进制转成Rgba格式this.hexToRgba(this.props.toolColor)hexToRgba(hex){return{r:parseInt('0x'+十六进制。slice(1,3)),g:parseInt('0x'+hex.slice(3,5)),b:parseInt('0x'+hex.slice(5,7)),a:'1',};}3.二级组件渲染问题需要从父组件获取数据，重新渲染组件最后贴下全部代码//Copyright2021zhaoardenimportReactfrom'react'importreactCSSfrom'reactcss'import{SketchPicker}from'react-color'classSketchColorextendsReact.Component{constructor(props){super(props)this.state={displayColorPicker:false,}}hexToRgba(hex){返回{r:parseInt('0x'+hex.slice(1,3)),g:parseInt('0x'+hex.slice(3,5)),b:parseInt('0x'+hex.slice(5,7)),a:'1',};}//rgbaTohex(color){//返回'#'+Number(color.r).toString(16)+Number(color.g).toString(16)+Number(color.b).toString(16);//}handleClick=()=>{this.setState({displayColorPicker:!this.state.displayColorPicker})};handleClose=()=>{this.setState({displayColorPicker:false})};handleChange=(color)=>{this.setState({color:color.rgb})this.props.setTooloColor(color.hex)};渲染（）{合作nst{toolColor}=this.propsletcolorData=this.hexToRgba(toolColor)conststyles=reactCSS({'默认':{颜色:{宽度:'36px',高度:'14px',borderRadius:'2px',背景:`rgba(${colorData.r},${colorData.g},${colorData.b},${colorData.a})`,},swatch:{padding:'5px',background:'#fff',borderRadius:'1px',boxShadow:'0001pxrgba(0,0,0,.1)',display:'inline-block',cursor:'pointer',},popover:{position:'absolute',zIndex:'2',},cover:{position:'fixed',top:'0px',right:'0px',bottom:'0px',left:'0px',},},});返回(
{这个.state.displayColorPicker？
