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

这篇文章主要介绍如何使用react-color实现前端取色器，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

背景

我们可以通过react-color实现前端界面的取色器，效果如下图所示：

安装

npm i react-color -S

使用

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 (       {this.setSubtitleFontColor(e)}}        onChangeComplete={(e) => {this.setSubtitleFontColor(e)}} />}        trigger="click"      >        
          
{subtitleColor}
          
        
          )  }}export default HandleCreateVideoByHotNews;

以上是"如何使用react-color实现前端取色器"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！