当前位置: 首页 > news >正文

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

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.mrgr.cn/news/25207.html

相关文章:

  • 快速完成论文初稿写作的ChatGPT提示词分享
  • Kamailio-神仙SIPp压力测试工具
  • printf中的标志字符为-、+、#、空格等
  • 判断当前用户登录时常是否超过两个小时
  • 这篇苹果的AI论文介绍了AdEMAMix:一种利用双指数移动平均值的新型优化方法,以提升梯度效率并改善大规模模型训练性能
  • HTTP和HTTPS
  • Cursor汉化教程及AI 自定义模型教程
  • 华为OD机试真题 E卷 - 投骰子问题(含题目描述+解题思路+代码解析)
  • 企微无限群发:精准营销与合规边界的探索
  • 在WordPress中最佳Elementor主题推荐:入门级指南
  • Android Activity组件与进程启动间关系
  • 科技之光,照亮未来之路“2024南京国际人工智能展会”
  • 异频gap是什么作用?所有异频都需要gap配置吗?UE能力与异频gap配置的关系?
  • python学习第八节:爬虫的初级理解
  • 抖音豆包大模型Prompt 最佳实践
  • 基于vue框架的宠物爱好者交流网站的设计与实现p2653(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
  • QGIS(Quantum GIS)使用详解
  • 无人机培训机构组装调试技术详解
  • sftp上传和下载文件
  • 美团面试:什么是G1垃圾回收底层原理?说说你的调优过程