antd 表单点击提交没反应, validateFieldsAndScroll 没执行

最新推荐文章于 2023-05-30 19:11:45 发布
最新推荐文章于 2023-05-30 19:11:45 发布
阅读量2.6k 收藏 2
点赞数 1
分类专栏： react 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yunchong_zhao/article/details/116305655
版权

我的原因是   我在某个表单哪里自定义了 一个验证   删除之后 就可以提交了 

具体详情看官方文档    https://ant.design/components/form-cn/

看自定义验证方法validator代码块里是否有某一条分支没有执行 callback 函数。官方规定：自定义校验 callback 必须被调用。

yunchong_zhao
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
解决antd Form 表单校验方法无响应的问题
01-18
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响应 发现无响应, 无报错, 完全蒙逼了, 排查良久, 添加校验字段后发现可以成功校验, 于是想着大不了我全部手动添加字段名校验, 终于, 错误的原因浮现出来了 from.validateFields([n
快速定位到ant-design form表单校验未通过的item
绝对零度的博客
05-16 466
在项目开发中，我们经常遇见长长的表单，长到表单写花眼的那种，一屏放不下，滚动条还得往下滚动几下。当我们提交表单的时候，有的表单项校验未通过，且这个表单项未可视区域，这就会给用户造成一定的困扰，认为提交按钮点击没有反应或者认为系统做的不够人性化。于是就引申出下面的需求，点击提交按钮，未校验通过的表单项如果不在可视区域就滚动到可视区域。
antd Form 表单校验方法无响应
qq_36800820的博客
09-30 3716
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响...
【Antdv】表单校验失败时将页面滚动到错误消息所在位置
Owen的博客
05-30 607
遇见超长表单，提交校验失败，我们希望页面可以滚动到第一个错误消息的所在位置。是一个 DOM 方法，它使得元素滚动到可视区域内。通过选择器字符串匹配文档中的元素，并。
表单点击提交后按钮置灰无法提交
MZA666的博客
04-10 4312
此功能只限点击提交按钮后,置灰,无法校验数据是否提交成功,刷新页面后,置灰功能解除,可再次提交表单数据.<BUTTON class="btn btn-info" type="submit" id="submit" onclick="javascript:{this.disabled=true;Loan.submit();}" > 提交</BUTTON>&l
关于antd 表单validateFields validateFieldsAndScroll方法不执行的一个可能原因
weixin_43924896的博客
11-27 9914
在使用antd form组件的的validateFields或者validateFieldsAndScroll方法时如果它没有进入方法而是直接跳过了方法，那不妨看看自定义验证方法validator代码块里是否有某一条分支没有执行 callback 函数。官方规定：自定义校验 callback 必须被调用。 补充一下我测的，调callback(null)相当于没执行callback; callba...
关于antd表单的validateFieldsAndScroll没执行
cc常 的博客
09-08 2272
关于antd表单的validateFieldsAndScroll没执行 看了其他博主的文章，附上 antd 表单点击提交没反应, validateFieldsAndScroll 没执行 关于antd 表单validateFields validateFieldsAndScroll方法不执行的一个可能原因 可能是validator验证没有执行 callback 函数，但是我的情况有些不一样，做点补充，我是使用validator去验证了长度，但是是两个rule规则使用了同一个validator验证，导致表单不能
React中Antd表单提交验证4.x版本---自定义 validator 没有效果的解决方法
weixin_51364974的博客
09-24 1815
声明式写法 rules={[ { required: true, message: '用户名不能为空' }, { min: 4, message: '用户名至少4位' }, { max: 12, message: '用户名至多12位' }, { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名必须需是英文，数字或下划线组成' }, ]} 自定义validator写法 validatePwd = async (rule, v
记录antd form组件使用中的几个小功能
MFWSCQ的博客
11-21 1553
一、表单提交 表单提交的时候使用form.validateFields((err,values)=>{})，如果errfalse则所有都通过了表单校验，values是定义表单项时的对应名称和值的对象。 //添加数据的确定按钮 function onOk(){ const {form} = formRef.current.props; form.validateFields((e...
Ant Design Form表单提交时校验失败无法自动滚动目标字段
weixin_42888238的博客
04-08 1837
Ant Design Form组件 问题: Ant Design Form表单提交时校验失败无法自动滚动目标字段 方案: Form.useForm().scrollToField() 具体实现: const onFinish = async () => { try { await form.validateFields() // 触发表单验证 // 具体业务逻辑 } catch (error) {
react使用antd表单赋值,用于修改弹框的操作
01-18
7、在取消方法和修改成功后中给赋空值，要不然，点击添加的方法表单里面会有值 7、OK 补充知识：react中使用antd的表单重置数据 resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则...
antd form表单数据回显操作
01-22
index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据 //index页面 import React from 'react' import { Table, Button, message, Input, Select, ...
如何防止INPUT按回车自动提交表单FORM
11-29
form中的input只有一个，input获得焦点时按回车会form自动提交： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <...
防止用户重复提交表单的方法和组件.rar
01-09
好友使用vue技术封装了一个专门用于提交表单和下载文件的“防抖按钮”，其实现原理和使用方法看这里 https://blog.csdn.net/PursueExcellence/article/details/103903139。
next.js中路由 跳转的两种方式，以及地址栏传参和接受参数
热门推荐
业余前端的职业经历
05-30 1万+
因为公司的前台项目需要做seo优化，单页应用项目是不适合做seo的，然后就选择了next.js，之前是搞vue出身了，react简直就是个白纸，菜鸟。 我们都知道如果在react中路由跳转使用，link 和 this.history.push 那么在 next中怎么跳转的呢，和怎么获取参数呢。 其实也是这两种呢， 只不过next可能封装了下吧 也是link方式 import Link from "next/link" 使用 注意它这个是 使用的 href 好像 和 react中还有点不用 reac
antd中 监听某个表单域得变化， 触发onChange事件， 3.* 版本
业余前端的职业经历
06-29 9629
在antd中 有时候 还是会碰见这样得问题得，但是antd已经帮我们封装好了, 通过form表单来控制 各个表单元素 ，当我们想要监控某一个表单的变化的时候 发现不好搞了 最近有个小需求 就是 监听表单中 单选框值得变化 来触发一些 效果，这样的话就要求你要知道 每次值发现改变的回调了 在 配置的时候 有一个api方法 可以用来 监控变化 以及变化后的值 onValuesChange 字段值更新时触发回调事件 function(changedValues, allValues) onFieldsCha
解决react：Warning: componentWillMount/componentWillUpdate has been renamed问题
业余前端的职业经历
03-03 9585
这个意思是reactt 版本更新的问题已经移除了 这个生命周期函数 已经变成了下面的样子 如果react代码在19年11月之后的 版本 UNSAFE_componentWillMount() // 组件挂载前 UNSAFE_componentWillUpdate() 组件 更新后 ...
antd 表格 固定列 设置 横向滚动条，常用于列比较多的情况
业余前端的职业经历
05-17 8045
table表格展示，在后台中用的特别多，当一些列特别多的情况下， 就需要我们用固定列的方式进行展示，然后 横向滚动条 对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 scroll.x 配合使用 注意要配合 scroll.x 进行使用哈，否则就算是你固定了 也不会出现滚动 条 const columns = [ { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fi
antd 中 清空Input组件中的值，不是通过form.setFiledValue的方式，非受控组件清空值
业余前端的职业经历
06-14 7709
最近做了一个业务就是在输入框中处理防抖的业务，本来就可以，测试小姐姐说要 加个按钮可以 清空下 输入框中的值。 我想了想 本来想直接搞一个 state状态值 然后直接 setState方式清空呢 发现根本不行 因为防抖触发的就是异步的 导致 连输入内容都不行。 其实 这个时候 我就想到了 要用 form组件的 setFieldValue的形式 进行处理 但是那样的话 我好想很大部分要重写了，不想这么大动干戈哎 后来就想了想 原生的非受控组件 可以直接通过dom操作清空输入框中的值 我先试试看 好像不太行
react antd 表单提交完成需要清空关闭组件
最新发布
06-02
好的，针对你的问题，我可以给出以下的解决方案： 1. 在表单提交成功后，执行清空表单操作，并将弹窗组件关闭。 2. 可以通过在父组件中维护一个状态变量，控制弹窗组件的显示和隐藏。表单提交成功后，将该状态变量设置为 false，即可关闭弹窗组件。 具体的实现方式，可以参考以下代码： ```jsx import React, { useState } from 'react'; import { Modal, Form, Input, Button } from 'antd'; const ExampleForm = (props) => { const [form] = Form.useForm(); const [visible, setVisible] = useState(false); const handleSubmit = () => { form.validateFields().then((values) => { // 提交表单 console.log(values); // 清空表单 form.resetFields(); // 关闭弹窗组件 setVisible(false); }); }; return ( <> <Button onClick={() => setVisible(true)}>打开弹窗</Button> <Modal title="示例弹窗" visible={visible} onCancel={() => setVisible(false)} footer={[ <Button key="cancel" onClick={() => setVisible(false)}> 取消 </Button>, <Button key="submit" type="primary" onClick={handleSubmit}> 提交 </Button>, ]} > <Form form={form}> <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名' }]} > <Input /> </Form.Item> <Form.Item label="邮箱" name="email" rules={[{ required: true, message: '请输入邮箱' }]} > <Input /> </Form.Item> </Form> </Modal> </> ); }; export default ExampleForm; ``` 在上述代码中，我们使用了 `useState` 钩子来维护弹窗组件的状态变量 `visible`，并在表单提交成功后将其设置为 false，以关闭弹窗组件。同时，我们也使用了 `Form` 组件来进行表单的管理，通过 `form.resetFields()` 方法来清空表单。在弹窗组件的底部，我们添加了取消和提交按钮，点击提交按钮时，会调用 `handleSubmit` 函数来提交表单。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yunchong_zhao

帮到你了，请作者喝杯矿泉水可好

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值