antd form 自定义组建并编辑回显值

在Ant Design (antd) 的表单组件中，自定义组建通常用于创建一些特定于业务需求的非标准输入控件。如果你想要编辑回显值，你可以按照以下步骤操作：

1. **创建自定义组件**：
首先，你需要创建一个React组件，这个组件应该接收`value`和`onChange`等基本属性，用来设置初始显示内容和处理用户输入的变化。

import React from 'react';
import { Input } from 'antd';

const CustomInput = ({ value, onChange }) => {
  return (
    <div>
      {/* 使用antd的Input，并传递你的值和事件处理器 */}
      <Input value={value} onChange={onChange} />
    </div>
  );
};

export default CustomInput;

2. **在Form组件中使用自定义组件**：
然后，在`Form`组件中，你可以像使用内置的`Input`一样，引用你的`CustomInput`组件，并在初始化时设置回显值。

import { Form, Input } from 'antd';
import CustomInput from './CustomInput';

const MyForm = () => {
  const [form] = Form.useForm();
  const initialValue = '你的回显值'; // 可能是一个字符串、对象或其他数据类型

  form.setFieldsValue({
    customField: initialValue,
  });

  const onFinish = (values) => {
    console.log('表单提交', values);
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item label="自定义字段" name="customField">
        <CustomInput />
      </Form.Item>
    </Form>
  );
};

export default MyForm;

当你打开表单时，你的自定义输入框会直接显示预设的回显值。如果用户修改了值，`onChange`事件会被触发，更新到表单状态。