如何使用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 (      <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;

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