关于清空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 (<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;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/194281.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Linux】第二十六站：软硬链接

【Linux】第二十六站：软硬链接

文章目录 一、软链接二、硬链接三、ln命令四、该如何理解硬链接&#xff1f;五、如何理解软链接六、为什么要用软硬链接1.软链接的应用场景2.硬链接的应用场景 一、软链接 如下所示&#xff0c;我们创建一个文件以后&#xff0c;然后执行下面的指令 ln -s file.txt soft-link…
阅读更多...
C++模拟实现unordered_map和unordered_set

C++模拟实现unordered_map和unordered_set

目录 1.了解哈希表 1.哈希表 1.他的实现原理就是&#xff1a; ​编辑 2.写单个数据的类型&#xff08;这边先模拟map的kv类型&#xff0c;后面会再一起改&#xff0c;这边先一步步的先简单实现他&#xff09; 3.封装整个类&#xff1a; 4.哈希表中存储string 2.哈…
阅读更多...
前后端分离部署https

前后端分离部署https

引用&#xff1a;https://blog.csdn.net/weixin_35676679/article/details/127841598 前后端部署&#xff0c;&#xff0c;一般用的是nginx和java&#xff0c;&#xff0c;&#xff0c; 下载SSL证书&#xff1a; java配置https 将证书配置到springboot中 server:port: 544…
阅读更多...
线程...

线程...

文章目录 1.Linux中线程该如何理解2.重新定义线程 和 进程3.重谈地址空间 --- 第四讲4.Linux线程周边的概念 线程:是进程内的一个执行分支。线程的执行粒度,要比进程要细 很多教材喜欢这么说&#xff0c;这只是一个线程的特征之一&#xff0c;来解释线程。 1.Linux中线程该如何…
阅读更多...
基于51单片机的交通灯_紧急开关+黄灯倒计时+可调时间

基于51单片机的交通灯_紧急开关+黄灯倒计时+可调时间

51单片机交通灯_紧急开关黄灯倒计时可调时间 开题报告系统硬件设计主控制器选择系统硬件结构图时钟及复位电路指示灯及倒计时模块 倒计时模块&#xff1a;程序软件主流程框架main函数 设计报告资料清单资料下载链接 基于51单片机交通灯_紧急开关黄灯倒计时可调时间 仿真图prote…
阅读更多...
题目：神奇的进制

题目：神奇的进制

解题思路&#xff1a; 用电脑自带的计算器&#xff0c;切换到程序员模式。里面有进制转换功能。 由题目&#xff0c;要求严格递增且都为字母&#xff0c;还要大于2023&#xff0c;则数字16进制为ABC。
阅读更多...
【STM32】电机驱动

【STM32】电机驱动

一、电机分类 二、直流电机的分类 1.有刷电机 2.无刷电机 3.直流减速电机 三、H桥电路 正向旋转 驱动Q1和Q4 反向旋转 驱动Q2和Q3 四、MC3386电机驱动芯片 1.基本原理图 1&#xff09;前进/后退&#xff1a;IN1和IN2的电平顺序决定电机的正反转 2&#xff09;调节速度&#…
阅读更多...
ARM Cortex-A、Cortex-M和Cortex-R简介

ARM Cortex-A、Cortex-M和Cortex-R简介

ARM Cortex-A&#xff0c;Cortex-M和Cortex-R是ARM处理器系列的不同产品线&#xff0c;针对不同的应用场景和要求进行了优化。以下是它们之间的主要区别&#xff1a; 1. 应用场景&#xff1a;Cortex-A系列处理器主要用于高性能计算设备&#xff0c;例如智能手机、平板电脑、个…
阅读更多...
Redis对象

Redis对象

Redis根据基本数据结构构建了自己的一套对象系统。主要包括字符串对象、列表对象、哈希对象、集合对象和有序集合对象 同时不同的对象都有属于自己的一些特定的redis指令集&#xff0c;而且每种对象也包括多种编码类型&#xff0c;和实现方式。 Redis对象结构 struct redisOb…
阅读更多...
Linux 防火墙

Linux 防火墙

目录 安全技术 防火墙的分类 按保护范围划分 按实现方式划分 按网络协议划分 应用层防火墙&#xff08;7层&#xff09; 防火墙的工作原理 linux防火墙的基本认识 防火墙工具介绍 1.iptables 2.firewalld 3.nftables 安全技术 —— 入侵检测系统&#xff08;Intru…
阅读更多...
Python 文件错误 SyntaxError: Non-Ascii Character \xe2

Python 文件错误 SyntaxError: Non-Ascii Character \xe2

此错误表明您正在代码中写入非 ASCII 字符。 在编译时&#xff0c;解释器感到困惑并抛出 SyntaxError: Non-ASCII character ‘\xe2’ 。 ASCII 字符使用与 UTF-8 的前 128 个字符相同的编码&#xff0c;因此 ASCII 文本与 UTF-8 兼容。 首先&#xff0c;您必须了解 ASCII 字符…
阅读更多...
centos7中通过kubeadmin安装k8s集群

centos7中通过kubeadmin安装k8s集群

k8s部署官方提供了kind、minikube、kubeadmin等多种安装方式。 其中minikube安装在之前的文章中已经介绍过&#xff0c;部署比较简单。下面介绍通过kubeadmin部署k8s集群。 生产中提供了多种高可用方案&#xff1a; k8s官方文档 本文安装的是1.28.0版本。 建议去认真阅读一下…
阅读更多...
使用coco数据集进行语义分割（1）：数据预处理，制作ground truth

使用coco数据集进行语义分割（1）：数据预处理，制作ground truth

如何coco数据集进行目标检测的介绍已经有很多了&#xff0c;但是关于语义分割几乎没有。本文旨在说明如何处理 stuff_train2017.json stuff_val2017.json panoptic_train2017.json panoptic_val2017.json&#xff0c;将上面那些json中的dict转化为图片的label mask&am…
阅读更多...
Docker下安装MySQL

Docker下安装MySQL

如果在Docker下直接拉取MySQL并运行镜像&#xff0c;由于没有指定字符编码集&#xff0c;可能会存在插入中文出现乱码的情况&#xff0c;并且当容器删除后&#xff0c;容器里面存在的数据会丢失&#xff0c;所以在运行容器时应该使用数据卷进行挂载&#xff0c;按照如下步骤操作…
阅读更多...
大模型中幂律缩放法则和涌现能力

大模型中幂律缩放法则和涌现能力

幂律缩放法则是一种用于描述两个变量之间关系的数学模型。 根据幂律缩放法则&#xff0c;当一个变量的值变化时&#xff0c;另一个变量的值以指数方式变化。具体而言&#xff0c;幂律缩放法则可以表示为Y a * X^b&#xff0c;其中Y表示一个变量的值&#xff0c;X表示另一个变…
阅读更多...
网页中的json文档，怎么保存到本地

网页中的json文档，怎么保存到本地

火狐浏览器操作方法 方法一 右键——>另存页面为 方法二 点击右边的三条横线——>另存页面为 谷歌浏览器操作方法 方法一 右键——>另存为 方法二
阅读更多...
阵列信号处理---均匀线阵和均匀加权线阵

阵列信号处理---均匀线阵和均匀加权线阵

均匀线阵 均匀线性阵列(ULA&#xff1a;Uniform Linear Array)&#xff1a;有N个阵元位于z轴上且具有均匀间距d。 一般都把阵列的中心放在坐标系的原点。如下图 阵元的位置为 p z n ( n − N − 1 2 ) d &#xff0c; n 0 , 1 , … , N − 1 p_{z_n}\big(n-\frac{N-1}{2}\b…
阅读更多...
LLM 开发模式 RAG，MRKL，Re-Act，Plan-Execute 模式对比

LLM 开发模式 RAG，MRKL，Re-Act，Plan-Execute 模式对比

本心、输入输出、结果 文章目录 LLM 开发模式 RAG&#xff0c;MRKL&#xff0c;Re-Act&#xff0c;Plan-Execute 模式对比前言RAG、MRKL、Re-Act和Plan-Execute模式的一些对比花有重开日&#xff0c;人无再少年实践是检验真理的唯一标准 LLM 开发模式 RAG&#xff0c;MRKL&…
阅读更多...
Wireshark抓包分析RTMP协议时，出现Unknown问题

Wireshark抓包分析RTMP协议时，出现Unknown问题

进行rtmp推流时&#xff0c;使用wireshark抓包&#xff0c;发现部分包显示Unknown 解决方法&#xff1a; 编辑 -> 首选项 -> Protocols -> RTMPT&#xff0c;这里Maximum packet size默认是32768 将该值调大&#xff0c;比如调成1048576&#xff0c;即可解决该问题。…
阅读更多...
pytorch 中的dim 的作用范围

pytorch 中的dim 的作用范围

1. 二维矩阵时 不同的运算&#xff0c; dim 的作用域都是一样的思想&#xff1b; 当数据是二维矩阵时&#xff0c; 可以按照下面的思想理解&#xff1a; 对于矩阵&#xff1a; dim0 按列操作&#xff08;沿列向下&#xff09;。 dim1 按行操作&#xff08;跨行&#xff09;。 …
阅读更多...
最新文章

Copyright @ 2022~2023