react-color库的简单使用

最新推荐文章于 2024-04-02 06:45:21 发布

weixin_34336292

最新推荐文章于 2024-04-02 06:45:21 发布

阅读量6.6k

点赞数 2

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5ccef9eaf265da036f4e92a7

版权

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>复制代码

好了，上图：

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

关注