react color庫的簡單使用

2021-09-24 08:46:02 字數 643 閱讀 2603

npm i react-color -s

import from 'react-color';複製**

然後在render()中使用即可:

複製**

定義乙個顏色狀態,用來儲存使用者選擇的顏色值:

constructor (props) }複製**

渲染成這樣:

render

() 複製**

預設效果,可以看到,當前選中的顏色值是#ffffff,當然可以不寫預設值:

當使用者選擇乙個顏色時,執行handlecolorchange方法:

handlecolorchange = (colorcode) => )}複製**

缺省會傳顏色值物件啦,自己可以列印看看,我用到了16進製制的顏色值,改變了color狀態就可以拿著它做壞事啦,比如可以給乙個元素設定背景:

複製**

好了,上圖:

另外說一句,我寫的**,格式真優雅:)

UICollectionView的簡單使用

所屬controller要遵循三個協議 uicollectionviewdatasource,uicollectionviewdelegate,uicollectionviewdelegateflowlayout uicollectionviewflowlayout flowlayout uicol...

BGAQRCode Android的簡單使用

compile com.google.zxing core 3.2.1 xmlns android 這句是使用選擇器框架時用到的 xmlns tools package com.huaqiang.zxingdemo 選擇框架用到 android name android.permission.cam...

Android VideoView的簡單使用

mvideoview.setvideouri uri.parse android.resource getpackagename r.raw play 設定乙個 控制器 控制器預設在父布局的地步 可以自己實現控制器布局 mvideoview.setmediacontroller new mediac...