使用react-color实现前端取色器

npmireact-color-S

importReact, { Component, Fragment, createRef } from'react';
import { Popover } from'antd';
import { SketchPicker } from'react-color';
typeStateType= {
subtitleColor: string;
};
typePropType= {
  [propName: string]: any;
};
interfaceHandleCreateVideoByHotNews {
state: StateType;
props: PropType;
}
classHandleCreateVideoByHotNewsextendsComponent {
constructor(props: any) {
super(props);
this.state= {
subtitleColor: '#FFF',
    }
  }
// 修改字幕字体颜色privatesetSubtitleFontColor= (e: any): void=> {
console.log(e);
this.setState({
subtitleColor: e.hex,
    });
  }
render() {
const { subtitleColor } =this.state;
return (
<Popovercontent={<SketchPickercolor={subtitleColor}
onChange={(e) => {this.setSubtitleFontColor(e)}}
onChangeComplete={(e) => {this.setSubtitleFontColor(e)}} />}trigger="click"><divclassName="create-hotnews-video-popup-operate-item-titleset-item-operate font-color-set"><divclassName="font-color-set-value">{subtitleColor}</div><divclassName="font-color-set-show"style={{backgroundColor: subtitleColor}}></div></div></Popover>    )
  }
}
exportdefaultHandleCreateVideoByHotNews;