react-color庫的簡單使用

hy_發表於2019-05-05
React

react-color是個拾色器，通過它來獲取顏色值，下載匯入，這裡用了一個其中一種拾色器：

npm i react-color -S
import { CompactPicker } from 'react-color';複製程式碼

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

<CompactPicker />複製程式碼

這樣太簡陋，不實用，所以正常這樣用：

定義一個顏色狀態，用來儲存使用者選擇的顏色值：

constructor (props) {    super(props);    this.state = {        color: '#FFFFFF',    }}複製程式碼

渲染成這樣：

render () {    return (        <CompactPicker color={this.state.color} onChange={this.handleColorChange} />    )}複製程式碼

預設效果，可以看到，當前選中的顏色值是#FFFFFF，當然可以不寫預設值：

react-color庫的簡單使用

當使用者選擇一個顏色時，執行handleColorChange方法：

handleColorChange = (colorCode) => {    this.setState({        color: colorCode.hex    })}複製程式碼

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

<div
    style={{
        height: 100,
        width: 100,
        marginTop: 10,
        backgroundColor: this.state.color
    }}>
</div>複製程式碼

好了，上圖：

react-color庫的簡單使用

另外說一句，我寫的程式碼，格式真優雅:)


相關文章