解决自定义 Antd Form 表单控件 获取值的问题

在Ant Design的Form表单中，获取表单项的值通常是通过form.getFieldValue方法。如果你遇到获取值的问题，可能是以下几个原因：

1. 没有正确使用Form.Item组件包裹表单控件。
2. 没有在Form组件上设置name属性或者在表单控件上没有设置name属性。
3. 控件的value属性没有正确绑定到组件的状态上。

以下是一个简单的例子，展示如何在Ant Design的Form中获取表单项的值：

import React from 'react';
import { Form, Input, Button } from 'antd';
 
const DemoForm = () => {
  const [form] = Form.useForm();
 
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };
 
  return (
    <Form form={form} onFinish={onFinish} name="demoForm">
      <Form.Item name="username" label="Username">
        <Input />
      </Form.Item>
      <Form.Item name="password" label="Password">
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">Submit</Button>
      </Form.Item>
    </Form>
  );
};
 
export default DemoForm;

在上面的例子中，当用户点击提交按钮时，表单的数据会通过onFinish回调函数的values参数传递给你。你可以直接从values对象中获取到表单项的值。

如果你需要在某个特定的时间点获取某个表单项的值，你可以使用form.getFieldValue方法：

const usernameValue = form.getFieldValue('username');
console.log('Username value: ', usernameValue);

确保调用form.getFieldValue的时候，表单项已经被渲染并且有一个有效的值。如果你尝试在表单项值还未设置的情况下获取值，可能会得到undefined。