antd获取表单数据

以下是两种使用Antd获取表单数据的方法：

1. 使用`form.getFieldsValue()`方法获取表单数据：

const btnValue = () => {
  console.log(form.getFieldsValue()); // 输出表单数据
}

2. 使用`Form.useForm()`方法获取表单数据：

import { Form } from 'antd';

const [form] = Form.useForm(); // 获取表单数据

// 在需要获取表单数据的地方调用以下代码：
const formData = form.getFieldsValue(); // 获取表单数据
console.log(formData); // 输出表单数据

相关问题

antd Form 提交如何获取表单数据

在 Ant Design 中，可以使用 Form 组件的 onSubmit 属性来提交表单数据。在 onSubmit 函数中，可以通过 event.preventDefault() 来阻止表单默认提交行为，然后通过 form.getFieldsValue() 来获取表单数据。

示例代码如下：

import { Form, Button } from 'antd';

const Demo = () => {
  const [form] = Form.useForm();
  
  const handleSubmit = (event) => {
    event.preventDefault();
    const values = form.getFieldsValue();
    console.log(values);
  }
  
  return (
    <Form form={form} onSubmit={handleSubmit}>
      <Form.Item name="username">
        <Input placeholder="请输入用户名" />
      </Form.Item>
      <Form.Item name="password">
        <Input.Password placeholder="请输入密码" />
      </Form.Item>
      <Button htmlType="submit">提交</Button>
    </Form>
  );
}

在上面的例子中，当用户点击提交按钮时，会触发 handleSubmit 函数，阻止表单默认提交行为，并通过 form.getFieldsValue() 获取表单数据，然后打印到控制台上。

typescript antd form表单初始化数据

在 TypeScript 中，使用 Ant Design 的 Form 表单组件进行初始化数据通常涉及两个关键步骤：

1. **创建Form实例**：首先，你需要在 React 组件中导入 `antd` 和 `Form`，然后创建一个 Form 实例。例如：

import { Form, FormInstance } from 'antd';

2. **初始化数据**：你可以通过设置 `initialValues` 属性来传递初始数据给 Form。这可以是一个 JavaScript 对象，其中包含了表单字段的键值对。例如：

const initialFormData = {
  username: '',
  password: '',
  // 更多字段...
};

const MyForm: React.FC = () => {
  const [form] = Form.useForm();

  // 在组件挂载时设置初始数据
  useEffect(() => {
    form.setFieldsValue(initialFormData);
  }, [form]);

  // ...其他的表单处理逻辑...

  return (
    <Form {...form} name="basic">
      {/* 表单控件 */}
    </Form>
  );
};

这里使用了 `useForm` Hook 来获取 Form 实例，并通过 `setFieldsValue` 方法一次性将所有字段的值设置为初始值。