是否可以将自己的字段添加到react-color blockpicker？

Question

是否可以在颜色下将自己的字段添加到react-color blockpicker？

Answer 1

如果您想添加自定义颜色，可以使用

extends

来实现。设置您想要添加的颜色并用它扩展 BlockPicker。这是一个例子：

import React from 'react';
import { BlockPicker } from 'react-color';

class MyColorPicker extends React.Component {
  state = {
    color: '#fff',
  };

  handleChangeComplete = (color) => {
    this.setState({ color: color.hex });
  };

  render() {
    const customColors = ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8'];
    
    return (
      <BlockPicker
        colors={customColors}
        color={this.state.color}
        onChangeComplete={this.handleChangeComplete}
      />
    );
  }
}

export default MyColorPicker;