react清空ant.design中表单内容的方法实现
作者：IDIOT___IDIOT
本文主要介绍了react清空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;到此这篇关于react清空ant.design中表单内容的方法实现的文章就介绍到这了,更多相关react清空ant.design表单内容内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！