AntD Form组件无法将输入存入浏览器自动补全的问题

问题根源分析 #

1. name属性不匹配且使用数字值：你的Form.Item的name是232323，Input的name是121，两者完全不一致；同时浏览器自动补全逻辑通常依赖有语义的字符串name，数字作为name会被浏览器忽略，无法关联输入数据。
2. 手动调用form.setFieldsValue干扰状态跟踪：在Input的onChange里手动调用form.setFieldsValue，会覆盖Antd Form的自动状态同步机制，导致浏览器无法正确识别输入框的真实值变化，进而无法触发自动保存逻辑。
3. 提交逻辑冗余：按钮已设置htmlType="submit"，不需要额外绑定onClick={handleSubmit}，冗余的手动调用会干扰浏览器对标准提交事件的识别。

修复后的代码示例 #

const [form] = Form.useForm();

// 用Form的onFinish处理提交逻辑，无需手动调用form.submit()
const handleSubmit = (values) => {
  console.log('提交数据:', values);
  // 这里添加你的API请求等提交逻辑
};

return(
  <Form
    {...formItemLayout}
    style={{ color: "#FFF", height: "100%", overflowY: "scroll" }}
    scrollToFirstError={{
      block: "center",
      behavior: "smooth",
      scrollMode: "if-needed",
    }}
    form={form}
    labelWrap
    autoComplete="on"
    onFinish={handleSubmit}
  >
    <ConfigProvider
      theme={{
        components: {
          Form: {
            itemMarginBottom: 14,
          },
        },
        token: {
          colorTextPlaceholder: "#868686",
          fontSize: "2vmin",
        },
      }}
    >
      {/* 使用一致的语义化字符串name */}
      <Form.Item label="test" name="testInput" autoComplete="on">
        <Input
          inputMode="text"
          name="testInput" // 和Form.Item的name完全一致
          autoComplete="on"
          type="text"
          style={{
            border: "none",
            backgroundColor: "#272727",
            borderBottom: "1px solid #FFF",
            borderRadius: "0px",
            boxShadow: "0 0 0 300px #272727 inset !important",
          }}
          {/* 移除手动的onChange和setFieldsValue，Antd Form会自动同步值 */}
        />
      </Form.Item>
      <Form.Item>
        {/* 移除冗余的onClick，依赖htmlType="submit"触发标准提交事件 */}
        <Button type="primary" htmlType="submit">
          submit
        </Button>
      </Form.Item>
    </ConfigProvider>
  </Form>
);

额外注意事项 #

• 若需精准匹配浏览器自动补全类型，可将autoComplete设为具体值，比如"username"、"email"，提升自动填充的准确性。
• 确认浏览器的自动填充功能已开启（如Chrome需在设置中启用"自动填充表单"选项）。
• 避免给输入框添加readonly、disabled属性，这类属性会阻止浏览器自动填充。

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