antd的Form表单控制实例的使用

2023-11-14

一、业务常景:

遇到一种业务场景,即一个简单的Modal框+ Form的一个组合,仔细思考了一下,和我们平时直接使用Form表单还是有一定的区别,我们通常是通过给Form表单绑定onFinish的回调函数,但是这里的业务需求是在model框上点击确定去提交表单,直接通过onFinish函数去回调是不太可行的。
在这里插入图片描述

二、使用Form表单的实例来解决:

打开Antd文档,发现有一个form的实例,这里说的稍稍有的绕,他的意思是你需要使用usForm自己去创建一个实例,并绑定到Form表单对form属性上。(文档下面专门有一栏来使用instance的方法)
在这里插入图片描述
在hook中使用:

 import { useForm } from 'antd/lib/form/util'; // 可以自己引入useForm
 import {  Form } from 'antd';
 
 const [form] = useForm(); // 引入Form使用
 const [form] = Form.useForm(); // 利用Form引入也可

这里绑定定义对form实例即可
这里绑定定义对form实例即可
在这里插入图片描述
然后即可愉快对使用你自己定义对form实例了,你取什么名字都可

在Class组件中应该也可以使用定义的实例,这个我没有做过测试,可以尝试一下,或者你也可以使用Ref来获取Form表单的实例

使用Ref来获取Form表单实例
1、首先自定义一个Ref
在这里插入图片描述
2、绑定Form
在这里插入图片描述
3、通过ref来访问实例方法
在这里插入图片描述
注意:validateFields返回的上一个Promis,调用这个方法是对表单做一个验证,通过即返回表单的值

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

antd的Form表单控制实例的使用 的相关文章

随机推荐

  • Bert: Pre-training of Deep Bidirectional Transformers for Language Understanding

    Abstract 我们介绍了一种语言表达模型称为BERT 也就是Transformer的双边编码表示 与当前语言表达模型不同 Peters et al 2018a Radford et al 2018 BERT设计通过考虑所有层左右上下文对
  • Erlang in Mac OSX

    download the source package from the erlang website http www erlang org download html and unzip it tar zxvf otp src R14B
  • 第十届蓝桥杯省赛C++B组 迷宫

    试题 E 迷宫 本题总分 15 分 问题描述 下图给出了一个迷宫的平面图 其中标记为 1 的为障碍 标记为 0 的为可 以通行的地方 010000 000100 001001 110000 迷宫的入口为左上角 出口为右下角 在迷宫中 只能从
  • 攻防世界weak_auth知识详解

    1 进入环境 当我们点进去的时候 出来一个网页 让我们输入username和password 先随便输入一下 然后弹出是说让我们用admin作为username登入 那我们就按照它的要求吧 进行修改 这次它只是提醒了密码错误 我们的重心开始
  • Es_算分函数使用详情

    算分函数查询 相关性计算 当我们利用match查询时 文档结果会根据与搜索词条的关联度打分 score 返回结果时按照分值降序排列 例如 我们搜索 虹桥如家 结果如下 score 17 850193 source name 虹桥如家酒店真不
  • 递归遍历树节点

    考虑这样一种场景 从一个object找到id对应的对象 obj如下结构 调用 fn obj 121 返回 对应object id 121 child const obj id 0 child id 1 child id 12 child i
  • Failed to read the 'localStorage' property from 'Window' 的解决办法

    参考链接 https stackoverflow com questions 30481516 iframe in chrome error failted to read localstorage from window access d
  • 【PHP小皮】使用教程

    博主介绍 主攻JAVA 因不可逆的原因 被迫学PHP 刚人门多多关照 文章目录 前言 一 官网下载小皮 二 使用步骤 1 打开小皮页面 2 使用步骤如下 总结 前言 随着快爱情的发展 php也不是那么的繁琐 下载集成工具小皮就可以省去很多时
  • 史上最全的maven的pom.xml文件详解

    本文转自 https www cnblogs com hafiz p 5360195 html 原作者 阿豪聊干货
  • Flask后端笔记(二)request、bort、响应、session、钩子

    Flask后端笔记 获取请求参数 上传文件 with的使用 bort函数与自定义异常处理 abort函数 自定义异常处理 返回的响应数据 元组 make response json模块的使用 使用jsonify返回json数据 重定向 设置
  • 最新的单机Lustre文件系统的安装

    1 单机Lustre的搭建 主机名 IP地址 内存 添加的共享磁盘大小 Centos7 9 test机 192 168 10 30 24 1G 20G 1 安装E2fsprogs包 下载OSS服务器所需要的包 E2fsprogs包只是在Ex
  • 该linux文件目录的owner权限

    sudo chown R admusr 要改的用户名 admusr path
  • “过早优化是万恶之源”这句话的源头

    来自于一篇大神的论文 而且原意没有一句话那么简单 Premature optimization is the root of all evil Programmers waste enormous amounts of time think
  • python 下载安装

    在下载Python之前我们要明确我们的开发环境的操作系统 这里我们选择Windows Python下载步骤 Python安装步骤 测试安装是否成功 注意 如果输入python后 没有出现如图效果 而是显示 python 不是内部或外部命令
  • .NET Core 获取自定义配置文件信息(多种方式)

    引用 Microsoft AspNetCore App 元包或将包引用添加到 Microsoft Extensions Options ConfigurationExtensions 包 简而言之 直接可以用 Appsetting json
  • ES分布式搜索引擎

    初始化RestClient 引入依赖 因为SpringBoot默认的ES版本是7 6 2 所以我们需要覆盖默认的ES版本
  • Linux用nohup后台运行python程序及停止

    在Ubuntu上用python flask写了一个后端代码 每次运行要CMD先远程连上服务器 然后python xxx py启动 这样操作会让cmd窗口被占用 没办法进行其他操作 ls cd这种 如果把窗口关了 程序就停止了 看了网上的例子
  • CTFSHOW【萌新计划】Writeup

    CTFSHOW 萌新计划 web1 萌新计划 web2 萌新计划 web3 萌新计划 web4 萌新计划 web5 萌新计划 web6 萌新计划 web7 萌新计划 web8 萌新计划 web9 萌新计划 web10 萌新计划 web11
  • 《我的眼睛--图灵识别》第五章:基础:形状识别

    我的眼睛 图灵识别 第五章 基础 形状识别 1 图形认识 三角形 三角形是由同一平面内不在同一直线上的三条线段 首尾 顺次连接所组成的封闭图形 三角形按边分有不等边三角形 等腰三角和等边三角形 按角分有直角三角形 锐角三角形 钝角三角形等
  • antd的Form表单控制实例的使用

    Form表单的控制实例 一 业务常景 二 使用Form表单的实例来解决 一 业务常景 遇到一种业务场景 即一个简单的Modal框 Form的一个组合 仔细思考了一下 和我们平时直接使用Form表单还是有一定的区别 我们通常是通过给Form表