Antd - Form 表单提交onfinish函数不生效

news2024/11/25 14:34:40

Antd - Form 表单提交onfinish函数不生效

  • 问题复现
  • 问题修复

问题复现

const onFinish: FormProps<InvoiceTitleInfo>['onFinish'] = (values) => {
    console.log(values);
}
const rules = [
   () => ({
        validator() {
            const address = form.getFieldValue('address') || '';
            if (!address) {
                return Promise.reject(new Error('请输入地址!'));
            }
        },
    }),
];
    
<Form form={form} name="eidtInvoiceForm" onFinish={onFinish} autoComplete="off">
     <Item<InvoiceTitleInfo> label="地址" name="address" rules={rules}>
          <Input />
      </Item>
	 <Item>
          <Button htmlType="submit">保存</Button>
     </Item>
</Form>

这里写了一个简单的表单,里面有个文本框代表地址,我们添加了Form的校验规则:

  • 地址不能为空,如果为空,效果如下:

在这里插入图片描述

但是如果我输入地址,然后点击保存:控制台什么都没输出,也就是onFinish函数没生效。
在这里插入图片描述

问题修复

如果是像我这样,自定义了校验规则,一定要有兜底的返回,例如:

const rules = [
   () => ({
        validator() {
            const address = form.getFieldValue('address') || '';
            if (!address) {
                return Promise.reject(new Error('请输入地址!'));
            }
            // 这里一定要有!!
            return Promise.resolve();
        },
    }),
];

结果如下:这个时候onFinish函数生效
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

安装MongoDB启动报错:找不到共享库文件libcrypto.so.10

查看依赖 ldd mongodb/bin/mongod MongoDB4.2.0需要依赖openssl10相关资源&#xff0c;必须先在Linux中安装openssl10。 执行命令&#xff1a;yum install compat-openssl10 下载完后最后执行ldd mongod看到文件都已经存在

MySQL -- 体系结构、索引结构

1 MySQL体系结构 英文版&#xff1a; 中文版&#xff1a; 以上图可知&#xff0c;MySQL的体系结构划分为以下4层&#xff1a; &#xff08;1&#xff09;网络接入层&#xff1a; &#xff08;2&#xff09;服务层&#xff1a; &#xff08;3&#xff09;存储引擎层&#x…

【软件测试】自动化测试-概念篇

&#x1f334;自动化 &#x1f6a9;自动化的概念 自动的代替人的行完成操作。 自动化在生活中处处可见 自动洒水自机&#xff0c;主要通上水就可以自动化洒水并且可以自动的旋转。 自动洗手液&#xff0c;免去了手动挤压可以自动感应出洗手液超市自动闸门&#xff0c;不需要手…

知识笔记合集

文章目录 vsCode可以运行c程序却无法运行c程序帆软填报属性不起作用java-实体类日期类型格式化Java-数据库id字段使用雪花算法IDEA-快捷键 vsCode可以运行c程序却无法运行c程序 vsCode中的tasks.json文件中添加"-lstdc" {"tasks": [{"type": &…

厉害啦煤炉!Mercari推出Ai Listing,卖家只需要拍照发图片就行!

Mercari&#xff08;中文名“煤炉”&#xff09;是一个日本C2C二手交易平台&#xff0c;类似于中国的“闲鱼”&#xff0c;月活跃用户数量超2,300万。根据2023年11月的财报&#xff0c;Mercari的净利润同比增长高达346%&#xff0c;达到了惊人的28亿日元&#xff01;同时&#…

零基础考过软考信息系统项目管理师经验分享

选择适合的课程&#xff1a;如果你是零基础&#xff0c;建议找一些专门针对新手的课程&#xff0c;讲解通俗易懂。 刷题至关重要&#xff1a;软考的题库很庞大&#xff0c;多做题是必须的。 做好笔记和复习&#xff1a;上课时要做好笔记&#xff0c;课后及时复习&#xff0c;…

弱口令爆破

本文仅作为学习参考使用&#xff0c;本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 本文基于burp抓包软件针对dvwa靶场进行弱口令爆破测试。 靶场设置&#xff1a; 在DVWA Security中&#xff0c;设置安全等级&#xff0c;并保存。 打开靶场。 1&#xff0c;抓包。…

【ArcGIS Pro实操第七期】栅格数据合并、裁剪及统计:以全球不透水面积为例

【ArcGIS Pro实操第七期】批量裁剪&#xff1a;以全球不透水面积为例 准备&#xff1a;数据下载ArcGIS Pro批量裁剪数据集1 数据拼接2 数据裁剪3 数据统计&#xff1a;各栅格取值3.1 栅格计算器-精确提取-栅格数据特定值3.2 数据统计 4 不透水面积变化分析 参考 准备&#xff1…

新品启航,共鉴未来 —— 摩托对讲机EJEAS X10首现重庆国际摩托车展

2024年重庆国际摩托车展&#xff08;CIMA Motor&#xff09;将于9月13日至16日在重庆国际博览中心举行&#xff0c;由三大权威机构联合主办。展会面积达16万平米&#xff0c;汇聚国内外116家展商&#xff0c;吸引千余名观众参与&#xff0c;展示摩托车新品、技术与文化&#xf…

code eintegrity npm err sha512

当 npm install 出现报错的时候&#xff1a; 你应该这样去解决&#xff1a; 删除 package-lock.json 文件&#xff0c;重新执行 npm install。 问题出现的原因 EINTEGRITY 错误码表示在npm缓存中无法找到 指定sha512校验合的模块。 出现这个问题的原因是缓存不一致&…

语义分割数据集|河流湖泊分割|水灾预警

江河湖泊自然水灾检测数据集&#xff0c;数据集整理不易&#xff0c;获取地址在最后&#xff0c;具体信息如下&#xff1a; 总数&#xff1a;290张 类别&#xff1a;1类 数据集大小&#xff1a;约106M 数据整理不易&#xff0c;数据集获取地址如下&#xff1a; https://…

陕西科技大学客座教授向凌云推动了中国新兴科技与教育的产学研结合

近日&#xff0c;陕西科技大学迎来了旅美经济学家向凌云教授的聘任仪式。此次活动在镐京学院会议厅举行&#xff0c;由镐京学院负责人为他颁发了客座教授的聘书。在当前科学技术迅猛发展的背景下&#xff0c;向凌云教授的加入引起了广泛关注&#xff0c;尤其是在教育界和新兴产…

7种有效的链接建设方法,提升你的SEO排名(信息图表)

想象一下你小时候听过的一句常见的话&#xff1a; “近朱者赤&#xff0c;近墨者黑。” 或者&#xff0c; “你的五个最亲近的朋友决定了你的平均水平。” 这些智慧在链接建设领域同样适用。想想将你的网站页面与其他网站连接起来的反向链接——这些入站链接就像你与外界的…

C++——关联式容器(3):红黑树

3.红黑树 3.1 红黑树的概念 上一篇文章介绍了AVL树&#xff0c;AVL树是解决一般的搜索二叉树效率退化的一种很好的方式。除了AVL树之外&#xff0c;红黑树也是一种非常好的选择。红黑树也是一种搜索二叉树&#xff0c;从其名字上就能够发现红黑树依靠标识红色或黑色来构建整棵…

集成显卡与独立显卡之间的区别,以及如何选择?

目录 一、集成显卡介绍 二、独立显卡介绍 三、性能与功耗对比 四、应用场景与选购指南 五、总结 大家在选购电脑的时候,显卡作为图形处理的关键设备,对大型3D游戏、图形设计类软件运行非常关键。目前电脑显卡主要分为两大类:集成显卡与独立显卡。今天给大家聊聊集成显卡…

Jeremy Howard对创业,AI产品,技术趋势,社区的看法

Jeremy Howard&#xff0c;一位在人工智能领域留下深刻印记的科学家和教育家&#xff0c;以其对深度学习的普及和教育的执着追求而闻名。出生于澳大利亚的他&#xff0c;不仅在学术界取得了令人瞩目的成就&#xff0c;更是将复杂的机器学习技术带给了更广泛的公众。 在悉尼大学…

Amazon EC2:引领企业迈向云计算的未来

在数字化转型的浪潮中&#xff0c;企业需要一个强大、灵活且安全的计算平台来支持其不断变化的业务需求。Amazon Elastic Compute Cloud&#xff08;EC2&#xff09;正是这样一个解决方案&#xff0c;它为企业提供了一个可扩展的云计算环境&#xff0c;帮助企业实现高效、低成本…

【课程系列11】某客时间AI 大模型应用开发实战营

某客时间AI 大模型应用开发实战营 链接 百度网盘&#xff0c;链接&#xff1a;https://pan.baidu.com/s/1ZC-fOC_QQjNM6wyVjQcYOg 课程详情 https://u.geekbang.org/subject/llm/ 初探大模型&#xff1a;起源与发展 预热篇&#xff1a;解码注意力机制&#xff08;Attentio…

Deep Active Contours for Real-time 6-DoF Object Tracking

这篇论文解决了从RGB视频进行实时6自由度&#xff08;6-DoF&#xff09;物体跟踪的问题。此前的基于优化的方法通过对齐投影模型与图像来优化物体姿态&#xff0c;这种方法依赖于手工设计的特征&#xff0c;因此容易陷入次优解。最近的基于学习的方法使用神经网络来预测姿态&am…

等保测评中的访问控制策略:企业优化指南

在信息安全等级保护&#xff08;等保&#xff09;测评中&#xff0c;访问控制作等保测评中的访问控制策略&#xff1a;企业优化指南为保障信息系统安全的关键环节&#xff0c;其策略的合理性和有效性直接影响到测评结果。企业如何优化访问控制策略&#xff0c;以满足等保测评的…