react-color库的简单使用

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，当然可以不写默认值：

当用户选择一个颜色时，执行handleColorChange方法：

handleColorChange = (colorCode) => {    this.setState({        color: colorCode.hex    })}复制代码

默认会传颜色值对象啦，自己可以打印看看，我用到了16进制的颜色值，改变了color状态就可以拿着它做坏事啦，比如可以给一个元素设置背景：

<div
    style={{
        height: 100,
        width: 100,
        marginTop: 10,
        backgroundColor: this.state.color
    }}>
</div>复制代码

好了，上图：

另外说一句，我写的代码，格式真优雅:)