首页 > 其他分享 >颜色选择器react-color

颜色选择器react-color

时间:2024-07-26 16:22:53浏览次数:16  
标签:displayColorPicker ColorPicker color hex react 选择器

配合表单使用的颜色选择器:https://www.jianshu.com/p/b7bc59146058,原文react hooks版本的,我改成的class函数版本的。

   1.安装:

npm install react-color --save

   2.封装:colorPicker.js

 

import React, { FC } from 'react';
import { SketchPicker } from 'react-color';

class ColorPicker extends React.Component {
  constructor() {
    super();
    this.state={
      displayColorPicker:false,
      color:"#6A8F2E",
    }
  }

  handleClick = () => {
    const {displayColorPicker} = this.state
    this.setState({ displayColorPicker: !displayColorPicker });
  };

  handleClose = () => {
    this.setState({ displayColorPicker: false });
  };

  handleChange = ({ hex }) => {
    const {onChange} = this.props;
    this.setState({ color: hex });
    // eslint-disable-next-line no-unused-expressions
    onChange && onChange(hex);
  };

  render() {

    const {displayColorPicker,color} =this.state;

    return (
      <div>
        <div
          style={{
            padding: '5px',
            background: '#fff',
            borderRadius: '1px',
            boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
            display: 'inline-block',
            cursor: 'pointer',
           }}
          onClick={this.handleClick}
        >
          <div
            style={{
              width: '36px',
              height: '14px',
              borderRadius: '2px',
              background: color,
            }}
          />
        </div>
        {displayColorPicker ? (
          <div
            style={{
              position: 'absolute',
              zIndex: '2',
            }}
          >
            <div
              style={{
                position: 'fixed',
                top: '0px',
                right: '0px',
                bottom: '0px',
                left: '0px',
              }}
              onClick={this.handleClose}
            />
            <SketchPicker color={color} onChange={this.handleChange} />
          </div>
        ) : null}
      </div>
    )
  }
}

export default ColorPicker;

 

3.使用:引入和表单使用的部分代码 

import ColorPicker from "../colorPicker";

 <Form {...formItemLayout} layout='vertical' onSubmit={this.okHandler}>
          <FormItem label="节点标题">
            {getFieldDecorator('name', {
              rules: [
                {
                  required: true,
                  message: '节点名称不可为空',
                },
                {
                  max: 100,
                  message: '字符限制100个',
                },
              ],
              initialValue: elementName,
            })(<Input placeholder="请输入节点名称" />)}
          </FormItem>
          <FormItem label="节点颜色">
            {getFieldDecorator('color', {
              initialValue: "#6A8F2E",
            })( <ColorPicker />)}
          </FormItem>
 </Form>

 

 

使用还是挺方便的。

标签:displayColorPicker,ColorPicker,color,hex,react,选择器
From: https://www.cnblogs.com/class1/p/18325589

相关文章

  • 在 Python 中将 Kivy 文件选择器添加到 PopUp
    我一直在尝试通过应用程序的按钮释放创建文件选择器弹出窗口。我分别管理了FileChooser和Popups,但无法将两者一起解决,这里有人可以帮助解决问题吗?我正在尝试用Python而不是Kivy.lang来实现PopUp,因为这是我在弹出窗口方面的经验。我也无法让KivyDoc示例正常工作。我......
  • 如何在 Folium colorbar 中自定义标题文本?我想增加颜色图标题文本的字体大小
    我正在尝试在Folium中使用颜色条作为输出变量圆形图colormap=cm.LinearColormap(colors=['green','red'],index=[min(df['output']),max(df['output'])],vmin=min(df['output']),vmax=max(df['output']),caption='out......
  • React18学习笔记 第六篇:对React内部运作深入了解
    Part1组件之间的概念差异·组件组件是我们为了描述用户界面的一部分而编写的,它只是一个普通的JavaScript函数,但它是一个返回React式元素的函数,这些元素是用JSX语法来编写的,我们可以把组件理解为一个“蓝图”或“模板”。·组件实例一个组件实例就像是一个组件的实际物理表......
  • 前端路由快速上手-React-Router
    1.前端路由简介前端路由是一种在单页面应用(SPA)中实现页面跳转的技术,它允许我们通过改变URL地址而无需重新加载页面来显示不同的内容。在前端路由中,每个路径(path)都对应一个组件(component),当访问特定的路径时,对应的组件就会在页面上渲染。2.创建路由开发环境要开始使用Rea......
  • 使用React脚手架时npx速度慢的问题解决
    React作为目前最流行的前端框架之一,其开发效率和组件化特性受到了开发者的广泛欢迎。然而在使用React脚手架工具,如create-react-app进行项目初始化时,有时会遇到npx命令执行速度非常慢的问题。本文将探讨这一问题的原因,并提供一些有效的解决方案。问题分析npx是Node.js包管......
  • cpanel 上的 React-django - MIME 类型('text/html')不是受支持的样式表
    我正在开发一个React-Django应用程序,并且它在本地运行当我将其安装在运行cpanel的服务器上时,它只显示一个空白页面。我的提供者检查了它并做了以下陈述:python应用程序在cpanel上正确安装错误原因应该在开发者端找到我制作......
  • 一文彻底搞懂浏览器事件机制、事件委托、事件冒泡、事件循环、Event Loop、react事件
    一、事件是什么?事件模型?事件是用户操作网页时发生的交互动作,比如click/move,事件除了用户触发的动作外,还可以是文档加载,窗口滚动和大小调整。事件被封装成一个event对象,包含了该事件发生时的所有相关信息(event的属性)以及可以对事件进行的操作(event的方法)。事件是用......
  • react18+antdPro可编辑表格的使用和数据联动
    在项目中经常会遇到这样的需求表格数据是需要编辑的而且有联动的需求,比如结论是单选形式选了存疑的才能选存疑类型然后会在上面tag显示对应的人数存疑>0人就显红,符合要求小于总数就显红而且选择为符合要求后还要清空存疑类型在vue中这很好实现得益于v-model......
  • React——useEffect和自定义useUpdateEffect
    useEffect是React的一个内置Hook,用于在组件渲染后执行副作用(例如数据获取、订阅或手动更改DOM)。它将在第一次渲染后和每次更新后都会执行。useEffect(()=>{//这里的代码将在组件挂载和更新时执行。},[dependencies]);//dependencies数组控制effect的重新执行。......
  • el-select选项自定义日期选择器选项,选中自定义日期,回显具体的日期时间
    需求:指标时点选择具体的时间,即自定义日期选项时,可操作选择具体日期。若选择自定义日期,应回显具体日期,如“2024-07-25”效果图如下:  代码如下:因为此处v-for生成的面板,每个面板都有一个指标时点选项,所以每个指标时点的select对应的ref需要唯一,此处通过遍历的下标i加以区分。......