Antd Form添加name属性后无法设置Input.Password值的问题

当你给Form.Item添加name="password"后，Ant Design的Form组件会接管该字段的状态管理，此时你手动给Input.Password设置的value={generatePW}会被Form内部维护的状态覆盖，导致生成的密码无法正常显示到输入框中。

使用AntD Form提供的useForm钩子获取表单实例，通过表单实例的setFieldsValue方法来更新密码字段的值，这样就能和Form的状态管理协同工作。

修改后的代码如下：

import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Input, Form, Button } from "antd";

const App = () => {
  // 获取表单实例
  const [form] = Form.useForm();

  // 生成密码并通过表单实例设置字段值
  const generatePassword = () => {
    let length = 10;
    let charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    let retVal = "";
    for (let i = 0, n = charset.length; i < length; ++i) {
      retVal += charset.charAt(Math.random() * n);
    }
    // 通过表单实例设置password字段的值
    form.setFieldsValue({ password: retVal });
  };

  const onFinish = (values) => {
    console.log(values);
  };

  return (
    <div>
      {/* 将表单实例绑定到Form组件 */}
      <Form form={form} onFinish={onFinish}>
        <Form.Item name="password">
          {/* 无需手动设置value，Form会自动绑定状态 */}
          <Input.Password placeholder="Basic usage" />
        </Form.Item>
        <Button onClick={generatePassword}>生成密码</Button>
      </Form>
    </div>
  );
};
export default App;

• 引入并使用Form.useForm()获取表单实例，将其绑定到<Form>组件上
• 移除Input.Password的value属性，由Form自动管理字段状态
• 在generatePassword函数中，调用form.setFieldsValue({ password: retVal })来更新密码字段的值

这样修改后，点击按钮生成的密码就能正常显示到输入框中，同时Form的表单校验、值收集等功能也能正常工作。

内容的提问来源于stack exchange，提问作者phu.duongquoc