如何在Refine+Ant Design中转换ColorPicker值后提交及回显？

1. 提交前将颜色值转换为HEX格式 #

你误用了getValueProps——这个属性是用来把表单存储的值传递给组件的，不是处理组件输出值的。要在提交前把ColorPicker返回的对象转成HEX字符串，需要使用getValueFromEvent属性，它会拦截组件的onChange事件值，转换后再存入表单。

修改你的background_color字段Form.Item：

<Form.Item
  label="Background color"
  name={["background_color"]}
  // 拦截ColorPicker的输出，转换为HEX字符串存入表单
  getValueFromEvent={(color) => color?.toHexString()}
>
  <ColorPicker />
</Form.Item>

这样表单存储的就是标准HEX格式的字符串，提交给服务器的自然也是正确值。

2. 编辑时将HEX值转回ColorPicker可识别的格式 #

Ant Design的ColorPicker本身支持直接接收HEX字符串作为value，如果你的编辑表单初始值是HEX格式，直接传入即可自动识别。如果遇到无法识别的情况，可以借助@ant-design/colors里的Color类，把HEX字符串转成组件需要的Color对象：

首先导入Color类：

import { Color } from '@ant-design/colors';

然后在Form.Item中用getValueProps转换值：

<Form.Item
  label="Background color"
  name={["background_color"]}
  getValueFromEvent={(color) => color?.toHexString()}
  // 编辑时把HEX字符串转成Color对象
  getValueProps={(value) => ({
    value: value ? new Color(value) : undefined,
  })}
>
  <ColorPicker />
</Form.Item>

完整的编辑组件示例（参考）：

import { Edit, useForm } from "@refinedev/antd";
import { IResourceComponentsProps } from "@refinedev/core";
import { Form, Input, ColorPicker } from "antd";
import { Color } from '@ant-design/colors';
import React from "react";

export const TagEdit: React.FC<IResourceComponentsProps> = () => {
  const { formProps, saveButtonProps } = useForm();

  return (
    <Edit saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item label="name" name={["name"]}>
          <Input />
        </Form.Item>
        <Form.Item
          label="Background color"
          name={["background_color"]}
          getValueFromEvent={(color) => color?.toHexString()}
          getValueProps={(value) => ({
            value: value ? new Color(value) : undefined,
          })}
        >
          <ColorPicker />
        </Form.Item>
      </Form>
    </Edit>
  );
};

内容的提问来源于stack exchange，提问作者gremo