为什么 AntD 表单组件不将输入保存到浏览器自动完成功能中

Question

我正在使用 antd 包作为我的表单和输入。由于某种原因，它不保留下一个会话的用户输入。我给输入提供了一个 name 属性，并使用 autoComplete="on" 和 autocomplete="on"，但当我提交表单时，它仍然没有保存它。

这是我的代码：

const [form] = Form.useForm();
 const handleSubmit = () => {
    form.submit();
  };
 return(
        <Form
      {...formItemLayout}
      style={{ color: "#FFF", height: "100%", overflowY: "scroll" }}
      scrollToFirstError={{
        block: "center",
        behavior: "smooth",
        scrollMode: "if-needed",
      }}
      form={form}
      labelWrap
      autoComplete="on"
    >
      <ConfigProvider
        theme={{
          components: {
            Form: {
              itemMarginBottom: 14,
            },
          },
          token: {
            colorTextPlaceholder: "#868686",
            fontSize: "2vmin",
          },
        }}
      >
        <Form.Item label="test" name={232323} id={232323} autoComplete="on">
          <Input
            inputMode="text"
            name={121}
            id={121}
            autoComplete="on"
            type="text"
            style={{
              border: "none",
              backgroundColor: "#272727",
              borderBottom: "1px solid #FFF",
              borderRadius: "0px",
              boxShadow: "0 0 0 300px #272727 inset !important",
            }}
            onChange={(e) => {
              console.log(
                JSON.stringify({
                  answer: e.target.value,
                  optionIds: [],
                  category: 0,
                  question: "test question",
                  orderNumber: 20,
                  questionId: 232323,
                })
              );
              form.setFieldsValue({
                232323: e.target.value,
              });
            }}
          />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" onClick={handleSubmit}>
            submit
          </Button>
        </Form.Item>
      </ConfigProvider>
    </Form>
);

它保存在自动完成建议中的唯一一次是我进行 api 调用以获取表单数据时。我还尝试使用超时来实现模拟 api 调用，认为它与生命周期中的某些内容有关，但这不起作用。 我也尝试过使用本机输入，但也不起作用

Answer 1

问题可能是由于名称属性是数字 (232323) 而不是字符串，这可能会导致浏览器和密码管理器解释表单输入的方式出现问题。浏览器通常期望名称属性是字符串。

此外，使用适当的自动完成属性，例如 autocomplete="username" 或 autocomplete="password" 等。这有助于浏览器自动填充行为