关于清空ant.design 中表单内容的方法

其实就两个方法具体怎么清除一个一个试试就知道了

表单有两个可能的属性：

• form
• formRef

可以用他们绑定两个用法在代码部分定义：

• form = useRef()
• form = Form.useForm()

清空的方法：

• form.current?.setFieldsValue({这里把你的值放进来并且赋值空字符串就好})
• form.setFieldsValue({这里把你的值放进来并且赋值空字符串就好})

使用实例：

import {LockOutlined,UserOutlined,
} from '@ant-design/icons';
import {LoginFormPage,ProConfigProvider,ProFormText,
} from '@ant-design/pro-components';
import {Button, Form, message, Tabs, theme} from 'antd';
import { useState } from 'react';
import {userRegisterUsingPost} from "@/services/yuapi/userController";
import { history } from '@umijs/max';const Page = () => {const formRef = Form.useForm()const [loginType, setLoginType] = useState('register');const { token } = theme.useToken();const registerUser = async (values:API.UserRegisterRequest) => {const res = await userRegisterUsingPost({...values})if(res.data){message.success("注册成功")history.push('/user/login')}else{message.error(res.message)formRef.current?.setFieldsValue({userAccount:"",userPassword:"",checkPassword:""})}}return (<divstyle={{backgroundColor: 'white',height: '100vh',}}><LoginFormPageonFinish={registerUser}formRef={formRef}submitter={{ searchConfig: { submitText: '注册', }}}backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"logo="https://github.githubassets.com/images/modules/logos_page/Octocat.png"backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"title="API 接口注册"containerStyle={{backgroundColor: 'rgba(0, 0, 0,0.65)',backdropFilter: 'blur(4px)',}}subTitle="全球最大的接口管理平台"activityConfig={{style: {boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',color: token.colorTextHeading,borderRadius: 8,backgroundColor: 'rgba(255,255,255,0.25)',backdropFilter: 'blur(4px)',},title: '活动标题，可配置图片',subTitle: '活动介绍说明文字',action: (<Buttonsize="large"style={{borderRadius: 20,background: token.colorBgElevated,color: token.colorPrimary,width: 120,}}>去看看</Button>),}}actions={<divstyle={{display: 'flex',justifyContent: 'center',alignItems: 'center',flexDirection: 'column',}}></div>}><TabscenteredactiveKey={loginType}><Tabs.TabPane key={'register'} tab={'账号密码注册'} /></Tabs>{loginType === 'register' && (<><ProFormTextname="userAccount"fieldProps={{size: 'large',prefix: (<UserOutlinedstyle={{color: token.colorText,}}className={'prefixIcon'}/>),}}placeholder={'请输入用户名'}rules={[{required: true,message: '请输入用户名!',},]}/><ProFormText.Passwordname="userPassword"fieldProps={{size: 'large',prefix: (<LockOutlinedstyle={{color: token.colorText,}}className={'prefixIcon'}/>),}}placeholder={'请输入密码'}rules={[{required: true,message: '请输入密码！',},]}/><ProFormText.Passwordname="checkPassword"fieldProps={{size: 'large',prefix: (<LockOutlinedstyle={{color: token.colorText,}}className={'prefixIcon'}/>),}}placeholder={'请确认输入密码'}rules={[{required: true,message: '请输入密码！',},]}/></>)}<divstyle={{marginBlockEnd: 24,}}><astyle={{float: 'right',}}>去登陆</a></div></LoginFormPage></div>);
};export default () => {return (<ProConfigProvider dark><Page /></ProConfigProvider>);
};

第二个实例：

import React, {useEffect, useRef, useState} from 'react';
import {Button, Checkbox, Form, FormInstance, Input, message} from 'antd';
import {updateInterfaceInfoUsingPost} from "@/services/yuapi/interfaceInfoController";
import {ProForm} from "@ant-design/pro-form";
import useForm = ProForm.useForm;export type Props = {handleUpdateModalOpen?:any;actionRef?:any;record: API.InterfaceInfo;
}const UpdateFrom: React.FC<Props> = (props) => {useEffect(()=>{formRef.setFieldsValue(props.record);}, [props.record])const [data,setData] = useState(props.record);const [formRef] = Form.useForm()const onFinish = async (values: any) => {values = {...values,id : props.record?.id}const res = await updateInterfaceInfoUsingPost(values);if(res.code == 0){props.handleUpdateModalOpen(false);message.success("修改成功");props.actionRef.current.reload();}else{message.error(res.message);}};const onFinishFailed = (errorInfo: any) => {console.log('Failed:', errorInfo);};return (<Formname="更新接口"labelCol={{span: 8}}wrapperCol={{span: 16}}style={{maxWidth: 600}}onFinish={onFinish}onFinishFailed={onFinishFailed}autoComplete="off"form={formRef}><Form.Item><h1>接口更新</h1></Form.Item><Form.Itemlabel="接口名称"name="name"rules={[{required: true, message: '请输入接口名称'}]}><Input/></Form.Item><Form.Itemlabel="接口描述"name="description"rules={[{required: false, message: '请输入接口描述'}]}><Input/></Form.Item><Form.Itemlabel="接口地址"name="url"rules={[{required: true, message: '请输入接口地址'}]}><Input/></Form.Item><Form.Itemlabel="接口调用方法"name="method"rules={[{required: true, message: '请输入接口调用方法'}]}><Input /></Form.Item><Form.Itemlabel="接口参数信息"name="requestParams"rules={[{required: false, message: '请输入接口参数信息'}]}><Input.TextArea  rows={5}/></Form.Item><Form.Itemlabel="接口请求头信息"name="requestHeader"rules={[{required: false, message: '请输入接口请求头信息'}]}><Input.TextArea rows={5}/></Form.Item><Form.Itemlabel="接口响应头信息"name="responseHeader"rules={[{required: false, message: ''}]}><Input.TextArea rows={5}/></Form.Item><Form.Itemlabel="接口状态"name="status"rules={[{required: true, message: '请输入接口状态'}]}><Input/></Form.Item><Form.Item wrapperCol={{offset: 8, span: 16}}><Button type="primary" htmlType="submit">Submit</Button></Form.Item></Form>);
}
export default UpdateFrom;