关于清空ant.design 中表单内容的方法
关于清空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 (
<div
style={{
backgroundColor: 'white',
height: '100vh',
}}
>
<LoginFormPage
onFinish={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: (
<Button
size="large"
style={{
borderRadius: 20,
background: token.colorBgElevated,
color: token.colorPrimary,
width: 120,
}}
>
去看看
</Button>
),
}}
actions={
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
}}
>
</div>
}
>
<Tabs
centered
activeKey={loginType}
>
<Tabs.TabPane key={'register'} tab={'账号密码注册'} />
</Tabs>
{loginType === 'register' && (
<>
<ProFormText
name="userAccount"
fieldProps={{
size: 'large',
prefix: (
<UserOutlined
style={{
color: token.colorText,
}}
className={'prefixIcon'}
/>
),
}}
placeholder={'请输入用户名'}
rules={[
{
required: true,
message: '请输入用户名!',
},
]}
/>
<ProFormText.Password
name="userPassword"
fieldProps={{
size: 'large',
prefix: (
<LockOutlined
style={{
color: token.colorText,
}}
className={'prefixIcon'}
/>
),
}}
placeholder={'请输入密码'}
rules={[
{
required: true,
message: '请输入密码！',
},
]}
/>
<ProFormText.Password
name="checkPassword"
fieldProps={{
size: 'large',
prefix: (
<LockOutlined
style={{
color: token.colorText,
}}
className={'prefixIcon'}
/>
),
}}
placeholder={'请确认输入密码'}
rules={[
{
required: true,
message: '请输入密码！',
},
]}
/>
</>
)}
<div
style={{
marginBlockEnd: 24,
}}
>
<a
style={{
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 (
<Form
name="更新接口"
labelCol={{span: 8}}
wrapperCol={{span: 16}}
style={{maxWidth: 600}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
form={formRef}
>
<Form.Item
>
<h1>接口更新</h1>
</Form.Item>
<Form.Item
label="接口名称"
name="name"
rules={[{required: true, message: '请输入接口名称'}]}
>
<Input/>
</Form.Item>
<Form.Item
label="接口描述"
name="description"
rules={[{required: false, message: '请输入接口描述'}]}
>
<Input/>
</Form.Item>
<Form.Item
label="接口地址"
name="url"
rules={[{required: true, message: '请输入接口地址'}]}
>
<Input/>
</Form.Item>
<Form.Item
label="接口调用方法"
name="method"
rules={[{required: true, message: '请输入接口调用方法'}]}
>
<Input />
</Form.Item>
<Form.Item
label="接口参数信息"
name="requestParams"
rules={[{required: false, message: '请输入接口参数信息'}]}
>
<Input.TextArea rows={5}/>
</Form.Item>
<Form.Item
label="接口请求头信息"
name="requestHeader"
rules={[{required: false, message: '请输入接口请求头信息'}]}
>
<Input.TextArea rows={5}/>
</Form.Item>
<Form.Item
label="接口响应头信息"
name="responseHeader"
rules={[{required: false, message: ''}]}
>
<Input.TextArea rows={5}/>
</Form.Item>
<Form.Item
label="接口状态"
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;