react Ant Design form 的用法，并获取整个form里面的值，代码举例

Ant Design 是一个非常流行的 React UI 库，它提供了许多组件，其中包括 Form 组件。Form 组件提供了一种简单的方式来管理表单数据，可以轻松地将输入数据收集到一个对象中。

以下是一个简单的示例，演示如何使用 Ant Design Form 组件来收集表单数据并将其打印到控制台中：

import React from "react";
import { Form, Input, Button } from "antd";

const DemoForm = () => {
  const onFinish = (values) => {
    console.log("Form values:", values);
  };

  return (
    <Form onFinish={onFinish}>
      <Form.Item label="Username" name="username">
        <Input />
      </Form.Item>
      <Form.Item label="Password" name="password">
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default DemoForm;

在上面的示例中，我们使用 Ant Design Form 组件来创建一个简单的表单。我们使用 `Form.Item` 包装每个表单控件，以便可以对其进行验证和布局。每个 `Form.Item` 都具有一个 `name` 属性，该属性将用于收集表单数据。在 `onFinish` 回调函数中，我们将表单数据打印到控制台中。

请注意，我们使用了 `Input` 和 `Input.Password` 组件来创建文本框和密码框。Ant Design 还提供了其他类型的表单控件，例如 `Checkbox`、`Radio`、`Select` 等。

如果您想要获取整个表单的值，可以在 `onFinish` 回调函数中获取 `values` 参数，该参数将包含整个表单的值。您可以将其打印到控制台中，或者将其发送到服务器进行处理。