运用React-Color实现的一个颜色选择器（带有取色功能）

话不多说直接看组件

<ProFormText
  fieldProps={{
    addonAfter: (
      <Popover
        content={
          <SketchPicker
            width={'240px'}
            color={fontColor[index]}
            onChange={(e: any) => onChangeFont(e, index)}
          />
        }
        trigger="click"
        placement="bottomLeft"
      >
        <div
          style={{ width: '20px', height: '20px', backgroundColor: fontColor[index] }}
        />
      </Popover>
    ),
    onChangeCapture: (e: any) => {
      const updatedColors = [...fontColor];
      updatedColors[index] = e.target.value;
      setFontColor(updatedColors);
    },
  }}
  name={`skin_font_color`}
  label="皮肤字体颜色"
  placeholder="皮肤字体颜色"
/>

自己封装的SketchPicker

import { SketchPicker } from 'react-color';
import styles from './index.less';
import { ReactComponent as IconPipette } from '@/assets/pipette.svg';
import { ColorPipette } from './color-pipette';

export default ({ ...props }) => {
  return (
    <div className={styles.sketchPicker}>
      <SketchPicker {...props} />
      <div
        className={styles.pipette}
        onClick={() => {
          const pipette = new ColorPipette({
            scale: 2,
            useMagnifier: true,
            listener: {
              onOk: ({ color }) => {
                props.onChange({ hex: color });
              },
            },
          });
          setTimeout(() => pipette.start(), 300);
        }}
        title="取色器"
      >
        <IconPipette />
      </div>
    </div>
  );
};

接下来是setFont的useState定义和onChange的回调onChangeFont

const [fontColor, setFontColor] = useState<string[]>(
      values?.skins?.map((item) => item.skin_font_color) || [],
);
const onChangeFont = (data: ColorResult, index: number) => {
  const updatedColors = [...fontColor];
  updatedColors[index] = data.hex;
  setFontColor(updatedColors);

  const fields = formRef.current?.getFieldsValue().skins;
  fields[index].skin_font_color = data.hex;
  formRef.current?.setFieldsValue({ skins: fields });
};

这里由于需求是可以创建多个，所以我们这里要用index来判断是那个组件的值 注意这里onChange不能捕捉到数组里面组件的值 要用onChangeCapture获取值 功能效果展示