表单在网站中对于数据的提交经常被使用到，关于表单的处理也因开发需求而变化。

本篇文章就来介绍在react中使用antdeaign的form表单来进行一些常规的操作，如取值、设置值、重置等。

tsx文件基础代码：

import { useEffect, useState } from "react";
import { Form, Input,Button,Space,Upload  } from "antd";
const formItemLayout = {
  labelCol: { xs: { span: 24, }, sm: { span: 24, }, },
  wrapperCol: { xs: { span: 24, }, sm: { span: 24, }, },
};
function RegistrationForm() {
  const [form] = Form.useForm();
  const onFinish = () => {}
  const clickOk = () => {}
  return (
	  <Form {...formItemLayout} form={form} name="register" onFinish={onFinish}  layout="vertical" scrollToFirstError >
		<Form.Item name="account" label="账号:" rules={[ { required: true, message: "请输入账号!", }, ]} >
		  <Input />
		</Form.Item>
		<Space >
		  <Button onClick={() => clickOk()} type="primary">提交</Button>
		  <Button htmlType="reset">重置</Button>
		</Space>
	  </Form>
  );
}
export default RegistrationForm;

获取form表单内所有的值：

const [form] = Form.useForm();
//方式一
form.validateFields().then((values) => {
	console.log('获取表单的数据：',values)
});
//方式二
let data = searchForm.getFieldsValue();
console.log('获取表单的数据：',data)

设置form表单的值：

const [form] = Form.useForm();
form.setFieldsValue({'account':'账号1'});

重置清空表单中的数据：

const [form] = Form.useForm();
//js方法
form.resetFields();
//html方式
<Button htmlType="reset">重置</Button>

表单在开发中对于数据的提交有着极为重要的作用，对于网站的规划需要合理使用表单。