使用react-color實(shí)現(xiàn)前端取色器的方法
背景
我們可以通過react-color實(shí)現(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實(shí)現(xiàn)前端取色器的文章就介紹到這了,更多相關(guān)ct-color前端取色器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解析react?函數(shù)組件輸入卡頓問題?usecallback?react.memo
useMemo是一個(gè)react hook,我們可以使用它在組件中包裝函數(shù)??梢允褂盟鼇泶_保該函數(shù)中的值僅在依賴項(xiàng)之一發(fā)生變化時(shí)才重新計(jì)算,這篇文章主要介紹了react?函數(shù)組件輸入卡頓問題?usecallback?react.memo,需要的朋友可以參考下2022-07-07nodejs和react實(shí)現(xiàn)即時(shí)通訊簡(jiǎn)易聊天室功能
這篇文章主要介紹了nodejs和react實(shí)現(xiàn)即時(shí)通訊簡(jiǎn)易聊天室功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08react性能優(yōu)化useMemo與useCallback使用對(duì)比詳解
這篇文章主要為大家介紹了react性能優(yōu)化useMemo與useCallback使用對(duì)比詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08React Hook用法示例詳解(6個(gè)常見hook)
這篇文章主要介紹了React Hook用法詳解(6個(gè)常見hook),本文通過實(shí)例代碼給大家介紹了6個(gè)常見hook,需要的朋友可以參考下2021-04-04在 React 中使用 Redux 解決的問題小結(jié)
在 React 中組件通信的數(shù)據(jù)流是單向的,頂層組件可以通過 props 屬性向下層組件傳遞數(shù)據(jù),而下層組件不能直接向上層組件傳遞數(shù)據(jù),這篇文章主要介紹了使用react+redux實(shí)現(xiàn)彈出框案例,需要的朋友可以參考下2022-10-10react高階組件經(jīng)典應(yīng)用之權(quán)限控制詳解
在React中,高階組件是重用組件邏輯的一項(xiàng)高級(jí)技術(shù)。下面這篇文章主要給大家介紹了關(guān)于react高階組件經(jīng)典應(yīng)用之權(quán)限控制的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09全棧輕量級(jí)搭配之Remix Prisma Sqlite使用分析
這篇文章主要為大家介紹了全棧輕量級(jí)搭配之Remix Prisma Sqlite使用示例分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05