Antd 4.0.0 如何通过 `const [form] = Form.useForm` 使用 form.getFieldValue() 和所有表单的 API

Antd 4.0.0: 如何通过 const [form] = Form.useForm 使用 form.getFieldValue() 和所有表单的 API？

在 Ant Design 4.0.0 版本中，我们可以使用 const [form] = Form.useForm() 方法来创建一个表单实例，并通过该实例来访问表单的各种 API，包括 getFieldValue() 方法。在本文中，我们将介绍如何使用 const [form] = Form.useForm() 来使用 getFieldValue() 方法，并提供一些案例代码来帮助理解。

使用 const [form] = Form.useForm() 创建表单实例

首先，我们需要在引入 Antd 组件的前提下，使用 Form.useForm() 方法来创建一个表单实例。该方法会返回一个数组，我们可以使用数组解构的方式将数组中的第一个元素赋值给 form 变量。代码如下所示：

import { Form } from 'antd';
const [form] = Form.useForm();

使用 form.getFieldValue() 获取表单字段的值

一旦我们创建了表单实例，我们就可以使用 form.getFieldValue() 方法来获取表单字段的值。该方法需要传入字段名称作为参数，并返回该字段的值。例如，我们可以使用 form.getFieldValue('username') 来获取名为 username 的字段的值。代码如下所示：

import { Form, Input } from 'antd';
const [form] = Form.useForm();
const DemoForm = () => {
  const handleFormSubmit = () => {
    const username = form.getFieldValue('username');
    console.log('Username:', username);
  };
  return (
    <Form form={form} onFinish={handleFormSubmit}>
      <Form.Item name="username" label="用户名">
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

在上面的示例代码中，我们创建了一个简单的表单，并在表单提交时使用 form.getFieldValue('username') 方法来获取用户名字段的值，并将其打印到控制台上。

使用 form 的其他 API

除了 getFieldValue() 方法之外，我们还可以通过表单实例 form 来访问其他一些常用的表单 API，例如 validateFields()、setFieldsValue()、resetFields() 等。这些 API 可以帮助我们实现表单的校验、赋值和重置等操作。

在这里，我们将介绍一个使用 validateFields() 方法进行表单校验的示例。代码如下所示：

import { Form, Input, Button, message } from 'antd';
const [form] = Form.useForm();
const DemoForm = () => {
  const handleFormSubmit = () => {
    form.validateFields()
      .then(values => {
        console.log('Form values:', values);
        message.success('表单校验通过');
      })
      .catch(error => {
        console.error('Form validation error:', error);
        message.error('表单校验失败');
      });
  };
  return (
    <Form form={form} onFinish={handleFormSubmit}>
      <Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }]}>
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

在上述示例中，我们使用 validateFields() 方法对表单进行校验，并通过 then 和 catch 方法分别处理校验通过和校验失败的情况。同时，我们可以在 then 方法中获取校验通过后的表单值，并在控制台上打印出来。

本文介绍了如何通过 const [form] = Form.useForm() 使用 Antd 4.0.0 版本中的表单 API，包括 getFieldValue() 方法。我们还提供了一些案例代码来帮助理解，并展示了如何使用 validateFields() 方法进行表单校验。通过这些方法，我们可以更方便地操作和管理表单数据。

希望本文能帮助你更好地理解和使用 Antd 4.0.0 版本中的表单 API，为你的项目开发带来便利。如果你有任何问题或疑问，可以参考 Antd 官方文档或留言咨询。祝你编程愉快！