欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用react-color實現(xiàn)前端取色器的方法

 更新時間:2021年11月11日 16:35:19   作者:Boale_H  
本文通過代碼給大家介紹了使用react-color實現(xiàn)前端取色器的方法,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

背景

我們可以通過react-color實現(xiàn)前端界面的取色器,效果如下圖所示:

在這里插入圖片描述

安裝

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;


到此這篇關(guān)于使用react-color實現(xiàn)前端取色器的文章就介紹到這了,更多相關(guān)ct-color前端取色器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 解析react?函數(shù)組件輸入卡頓問題?usecallback?react.memo

    解析react?函數(shù)組件輸入卡頓問題?usecallback?react.memo

    useMemo是一個react hook,我們可以使用它在組件中包裝函數(shù)??梢允褂盟鼇泶_保該函數(shù)中的值僅在依賴項之一發(fā)生變化時才重新計算,這篇文章主要介紹了react?函數(shù)組件輸入卡頓問題?usecallback?react.memo,需要的朋友可以參考下
    2022-07-07
  • nodejs和react實現(xiàn)即時通訊簡易聊天室功能

    nodejs和react實現(xiàn)即時通訊簡易聊天室功能

    這篇文章主要介紹了nodejs和react實現(xiàn)即時通訊簡易聊天室功能,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-08-08
  • react性能優(yōu)化useMemo與useCallback使用對比詳解

    react性能優(yōu)化useMemo與useCallback使用對比詳解

    這篇文章主要為大家介紹了react性能優(yōu)化useMemo與useCallback使用對比詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • React Hook用法示例詳解(6個常見hook)

    React Hook用法示例詳解(6個常見hook)

    這篇文章主要介紹了React Hook用法詳解(6個常見hook),本文通過實例代碼給大家介紹了6個常見hook,需要的朋友可以參考下
    2021-04-04
  • React中Redux核心原理深入分析

    React中Redux核心原理深入分析

    這篇文章主要介紹了如何在React中Redux原理,目前redux在react中使用是最多的,所以我們需要將之前編寫的redux代碼,融入到react當(dāng)中去,本文給大家詳細講解,需要的朋友可以參考下
    2022-11-11
  • 在 React 中使用 Redux 解決的問題小結(jié)

    在 React 中使用 Redux 解決的問題小結(jié)

    在 React 中組件通信的數(shù)據(jù)流是單向的,頂層組件可以通過 props 屬性向下層組件傳遞數(shù)據(jù),而下層組件不能直接向上層組件傳遞數(shù)據(jù),這篇文章主要介紹了使用react+redux實現(xiàn)彈出框案例,需要的朋友可以參考下
    2022-10-10
  • React Store及store持久化的使用教程

    React Store及store持久化的使用教程

    這篇文章主要介紹了React Store及store持久化的使用教程,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-01-01
  • react高階組件經(jīng)典應(yīng)用之權(quán)限控制詳解

    react高階組件經(jīng)典應(yīng)用之權(quán)限控制詳解

    在React中,高階組件是重用組件邏輯的一項高級技術(shù)。下面這篇文章主要給大家介紹了關(guān)于react高階組件經(jīng)典應(yīng)用之權(quán)限控制的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-09-09
  • 詳解React中合并單元格的正確寫法

    詳解React中合并單元格的正確寫法

    用表格進行頁面布局,頁面布局在各種瀏覽器的的兼容性, 本文主要介紹了詳解React中合并單元格的正確寫法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • 全棧輕量級搭配之Remix Prisma Sqlite使用分析

    全棧輕量級搭配之Remix Prisma Sqlite使用分析

    這篇文章主要為大家介紹了全棧輕量級搭配之Remix Prisma Sqlite使用示例分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-05-05

最新評論