关于javascript:Day14100-React-颜色选择器

1、需要

在 React+Ant Design 的我的项目中，须要抉择色彩。
Ant Design 没有适合的组件。

2、React-color

找到了这个插件，周下载量 103w

官网给了 Demo

import React from 'react'
import reactCSS from 'reactcss'
import {SketchPicker} from 'react-color'

class SketchExample extends React.Component {
  state = {
    displayColorPicker: false,
    color: {
      r: '241',
      g: '112',
      b: '19',
      a: '1',
    },
  };

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

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

  handleChange = (color) => {this.setState({ color: color.rgb})
  };

  render() {

    const styles = reactCSS({
      'default': {
        color: {
          width: '36px',
          height: '14px',
          borderRadius: '2px',
          background: `rgba(${ this.state.color.r}, ${this.state.color.g}, ${this.state.color.b}, ${this.state.color.a})`,
        },
        swatch: {
          padding: '5px',
          background: '#fff',
          borderRadius: '1px',
          boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
          display: 'inline-block',
          cursor: 'pointer',
        },
        popover: {
          position: 'absolute',
          zIndex: '2',
        },
        cover: {
          position: 'fixed',
          top: '0px',
          right: '0px',
          bottom: '0px',
          left: '0px',
        },
      },
    });

    return (
      <div>
        <div style={styles.swatch} onClick={this.handleClick}>
          <div style={styles.color} />
        </div>
        {this.state.displayColorPicker ? <div style={ styles.popover}>
          <div style={styles.cover} onClick={this.handleClose}/>
          <SketchPicker color={this.state.color} onChange={this.handleChange} />
        </div> : null }

      </div>
    )
  }
}

export default SketchExample

3、理论开发

1、我用的这种模式

2、须要十六进制转 Rgba 转格局

this.hexToRgba(this.props.toolColor)

hexToRgba(hex) {
    return {r: parseInt('0x' + hex.slice(1, 3)),
        g: parseInt('0x' + hex.slice(3, 5)),
        b: parseInt('0x' + hex.slice(5, 7)),
        a: '1',
    };
}

3、二次组件渲染问题

须要从父组件获取数据，从新渲染组件。

最初贴下全副代码

// Copyright 2021 zhaoarden
import React from 'react'
import reactCSS from 'reactcss'
import {SketchPicker} from 'react-color'

class SketchColor extends React.Component {constructor(props){super(props)
        this.state={displayColorPicker: false,}
    }

    hexToRgba(hex) {
        return {r: parseInt('0x' + hex.slice(1, 3)),
            g: parseInt('0x' + hex.slice(3, 5)),
            b: parseInt('0x' + hex.slice(5, 7)),
            a: '1',
        };
    }
    // rgbaTohex(color) {//     return '#'+Number(color.r).toString(16)+Number(color.g).toString(16)+Number(color.b).toString(16);
    // }

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

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

  handleChange = (color) => {this.setState({ color: color.rgb})
    this.props.setTooloColor(color.hex)
  };

  render() {const {toolColor}=this.props
    let colorData=this.hexToRgba(toolColor)

    const styles = reactCSS({
      'default': {
        color: {
          width: '36px',
          height: '14px',
          borderRadius: '2px',
          background: `rgba(${ colorData.r}, ${colorData.g}, ${colorData.b}, ${colorData.a})`,
        },
        swatch: {
          padding: '5px',
          background: '#fff',
          borderRadius: '1px',
          boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
          display: 'inline-block',
          cursor: 'pointer',
        },
        popover: {
          position: 'absolute',
          zIndex: '2',
        },
        cover: {
          position: 'fixed',
          top: '0px',
          right: '0px',
          bottom: '0px',
          left: '0px',
        },
      },
    });

    return (
      <div>
        <div style={styles.swatch} onClick={this.handleClick}>
          <div style={styles.color} />
        </div>
        {this.state.displayColorPicker ? <div style={ styles.popover}>
          <div style={styles.cover} onClick={this.handleClose}/>
          <SketchPicker color={colorData} onChange={this.handleChange} />
        </div> : null }

      </div>
    )
  }
}

export const ChooseColor = React.memo(SketchColor)

以上

参考资料

http://casesandberg.github.io…