Ant Design Form.Item设name后Input值不显示问题求解

当你给<Form.Item>设置name="userName"后，Ant Design的Form会进入受控模式——它会通过这个name将内部Input与Form自身的状态绑定，此时你手动给Input设置的value={fields?.firstName}会被Form的内置状态覆盖，导致值无法正常显示。

根据你的使用场景，有两种可行的处理方式：

方式一：改用Form内置状态管理（推荐） #

让Form完全接管控件的状态，去掉Input的value和自定义onChange，通过Form的initialValues初始化值，或用Form实例的setFieldsValue更新值，提交时直接从Form的返回值中获取数据。

代码示例：

import { Form, Input, useEffect } from 'antd';

// 创建Form实例
const [form] = Form.useForm();

// 监听外部fields变化，同步到Form状态
useEffect(() => {
  if (fields?.firstName) {
    form.setFieldsValue({ userName: fields.firstName });
  }
}, [fields, form]);

// 表单提交逻辑
const handleFinish = (formValues) => {
  // 直接从formValues中获取userName的值
  console.log('提交的数据:', formValues.userName);
};

return (
  <Form 
    autoComplete="off" 
    layout="vertical" 
    onFinish={handleFinish}
    form={form}
    // 也可以在这里设置初始化值
    initialValues={{ userName: fields?.firstName }}
  >
    <Form.Item name="userName" rules={getTextRule('name')}>
      <Input placeholder="请输入用户名" />
    </Form.Item>
  </Form>
);

方式二：保留自定义状态，同时启用校验（特殊场景） #

如果你必须自己维护fields状态，可给<Form.Item>添加noStyle属性，让它不接管Input的状态，但保留校验能力。此时需要手动触发校验，并单独处理错误信息的展示。

代码示例：

import { Form, Input } from 'antd';

const [form] = Form.useForm();

const handleInputChange = (e) => {
  const newValue = e.target.value;
  // 更新自定义的fields状态
  setFields(prev => ({ ...prev, firstName: newValue }));
  // 手动触发该字段的校验
  form.validateFields(['userName']);
};

return (
  <Form 
    autoComplete="off" 
    layout="vertical" 
    onFinish={handleFinish}
    form={form}
  >
    {/* 无样式的Form.Item，仅用于绑定校验规则 */}
    <Form.Item 
      name="userName" 
      rules={getTextRule('name')}
      noStyle
    >
      <Input 
        value={fields?.firstName} 
        onChange={handleInputChange} 
        placeholder="请输入用户名" 
      />
    </Form.Item>
    {/* 单独展示校验错误信息 */}
    <Form.Item name="userName" className="ant-form-item-explain">
      {form.getFieldError('userName')?.map(error => (
        <div className="ant-form-item-explain-error">{error}</div>
      ))}
    </Form.Item>
  </Form>
);

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