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

import React, { Component, Fragment, createRef } from 'react';import { Popover } from 'antd';import { SketchPicker } from 'react-color';type StateType = {  subtitleColor: string;};type PropType = {  [propName: string]: any;};interface HandleCreateVideoByHotNews {  state: StateType;  props: PropType;}class HandleCreateVideoByHotNews extends Component {  constructor(props: any) {    super(props);    this.state = {      subtitleColor: '#FFF',    }  }  // 修改字幕字体颜色  private setSubtitleFontColor = (e: any): void => {    console.log(e);    this.setState({      subtitleColor: e.hex,    });  }  render() {    const { subtitleColor } = this.state;    return (      <Popover        content={<SketchPicker color={subtitleColor}        onChange={(e) => {this.setSubtitleFontColor(e)}}        onChangeComplete={(e) => {this.setSubtitleFontColor(e)}} />}        trigger="click"      >        <div className="create-hotnews-video-popup-operate-item-titleset-item-operate font-color-set">          <div className="font-color-set-value">{subtitleColor}</div>          <div className="font-color-set-show" style={{backgroundColor: subtitleColor}}></div>        </div>      </Popover>    )  }}export default HandleCreateVideoByHotNews;