嘿，我看到你遇到的这个问题了——自定义封装的Input组件在Form里用的时候initialValues不生效，这其实是个很常见的Ant Design Form使用误区，核心原因是你的自定义组件没有正确接收Form通过Form.Item传递给它的value和onChange属性。

咱们一步步来解决：

问题根源 #

Ant Design的Form.Item会基于你设置的name，自动把表单状态里的value、变更方法onChange等props注入到它的子组件里。但如果你的自定义CustomInput组件没有接收并使用这些props，Form就没法把initialValues的值同步到组件里，自然就看不到初始值了。

修复步骤 #

1. 修改CustomInput组件，接收并转发必要的props #

把原来的CustomInput改成这样，让它接收value、onChange以及其他可能需要的props，然后传递给内部的AntD Input：

// CustomInput.js
import { Input } from 'antd';

const CustomInput = ({ value, onChange, ...props }) => {
  return <Input value={value} onChange={onChange} {...props} />;
};

export default CustomInput;

这样做的目的是让Form能通过props把初始值和变更逻辑传递到内部的Input组件，实现数据同步。

2. 确保Form.Item的配置正确 #

在使用CustomInput的时候，Form.Item的name属性要和initialValues里的键对应上，就像你原来的代码那样：

<Form
  initialValues={{ username: 'default name' }}
  onFinish={onFinish}
>
  <Form.Item name="username" label="Username">
    <CustomInput />
  </Form.Item>
  {/* 其他表单元素 */}
</Form>

扩展：处理自定义逻辑 #

如果你的CustomInput有自己的额外逻辑（比如格式化输入），也可以在组件内部处理value和onChange，比如：

const CustomInput = ({ value, onChange, ...props }) => {
  const handleChange = (e) => {
    // 这里可以加自定义处理逻辑，比如格式化输入为大写
    const formattedValue = e.target.value.toUpperCase();
    onChange({ target: { value: formattedValue } });
  };

  return <Input value={value} onChange={handleChange} {...props} />;
};

只要确保最终把正确的value传给Input，并且调用Form传递的onChange方法，Form的所有功能（包括initialValues、校验、提交等）都会正常工作。

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