用React-color制作取色器的方法操作是什么

来源：恒创科技编辑：恒创科技编辑部

2024-01-21 18:50:59

在实际应用中，我们有时候会遇到“用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制作取色器的方法操作是什么”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注恒创科技，小编每天都会为大家更新不同的知识。

本文地址：https://www.henghost.com/jishu/18468/