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

最新推荐文章于 2025-04-02 09:22:10 发布

Boale_H

最新推荐文章于 2025-04-02 09:22:10 发布

阅读量2.3k

点赞数 1

分类专栏：项目中实现的一些业务需求 react 文章标签： react.js 前端 reactjs

Edited by Boale_H （博哥的二进制世界）

本文链接：https://blog.csdn.net/Boale_H/article/details/121241912

版权

项目中实现的一些业务需求同时被 2 个专栏收录

40 篇文章

订阅专栏

react

19 篇文章

订阅专栏

本文介绍如何在前端项目中通过react-color库创建一个取色器组件。首先，你需要通过npm安装react-color。然后，引入SketchPicker组件，并在状态管理中设置初始颜色。在点击事件中，你可以调用方法更新颜色状态，并将新的颜色值传递给SketchPicker的onChange和onChangeComplete回调。最终，颜色选择器将在Popover弹出框中展示，用户可以选择并预览颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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;