antd中Form如何自己手动调用onFinish方法

最新推荐文章于 2024-07-12 16:55:56 发布
最新推荐文章于 2024-07-12 16:55:56 发布
阅读量1.3k 收藏 1
点赞数 2
文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63219422/article/details/132194636
版权

场景：

在一个ModalForm的浮层表单当中(Procomponents)，不想使用Fomr自带的提交和重置按钮，所有在submitter中自定义render了一个button用于提交；但是这个自定义提交的onClick事件并不能触发表单的校验规则，但是在Form提供了onFinish中可以调用，所以需要手动调用onFinish方法

附图：

可以看到表单有一个字段需要校验，触发校验可以使用onFinish

 触发后显示message提示

现有情况：

 自定义渲染下一步按钮，但是无法触发onFinish方法，不能联动表单校验

解决方法：

 通过formRef标记表单，使用submit方法即可触发

Z^x
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端案例—antd的表单项默认值提交时没有生效
qq_43720551的博客
12-22 665
你不能用控件的 `value` 或 `defaultValue` 等属性来设置表单域的值，默认值可以用 Form 里的 `initialValues` 来设置。注意 `initialValues` 不能被 `setState` 动态更新，你需要用 `setFieldsValue` 来更新。
antd蚂蚁金服组件内Form组件的事件怎么动态控制？
2401_82752568的博客
04-18 313
【代码】antd蚂蚁金服组件内Form组件的事件怎么动态控制？
antd Form 校验提示 onFinishFailed = { formPrompt } 无触发失败回调
Z_Wonderful的博客
07-05 2563
项目场景：提交表单且数据验证失败后，需要触发回调事件必填表单未填写，提交校验提示，使用(提交表单且数据验证失败后回调事件)onFinishFailed，无法触发： 原因分析： 提交表单方式与不匹配： 使用获取表单参数，将无法触发，会抛出异常第一种： ：获取捕获异常传入函数 好处：可以传入参数 缺点：无法触发 第二种 , 好处：可以触发**...
Antd Form onFinish 提交时 setState 非批量执行（batch update）
weixin_40795574的博客
11-25 1385
Antd Form onFinish 提交时 setState 非批量执行（batch update） 参考 issue 复现示例 import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { Button, Form } from 'antd'; const useSearc
React Antd Form 表单提交按钮时 onFinish 回调函数获取不到表单的值的问题
Constantiny的博客
05-22 1187
React Antd Form 表单提交按钮时 onFinish 回调函数获取不到表单的值的问题
Android: activity跳转时,每次都自动调用onfinish()
fengzi
05-19 4227
Android开发中遇到的一个问题
antd提交表单_antd4 form表单使用
weixin_42297705的博客
12-23 878
antd4.x form使用实例：// AntdForm4.js class组件形式import React, { Component, useEffect } from "react";import { Form, Input, Button } from "antd";const FormItem = Form.Item;const nameRules = { required: true, ...
解决antd Form 表单校验方法无响应的问题
01-18
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from....
解决antd的Form组件setFieldsValue的警告问题
01-21
记住：setFieldsValue的字段要对应得...在使用setFieldsValue给表单Form的某一个filed赋值时，可能掺杂了非表单控件中的字段，Form表单在赋值和渲染时发现有些字段无法渲染在现有的字段（因为不存在），所以就会报出这
基于antd4二次封装的form组件
12-31
Form组件在antd中扮演着数据收集与验证的重要角色，它与Input、Select等控件配合，能够方便地创建表单。然而，原始的antd Form组件可能无法满足所有项目中的复杂业务逻辑，因此，二次封装是为了提高代码复用性、增强...
antd Form组件方法getFieldsValue获取自定义组件的值操作
01-18
补充知识：Ant Design Pro，用setFieldsValue方法，给嵌套到Form表单中的DatePicker或RangePicker组件设置默认值 其实用setFieldsValue或者获取setState方法都可以设置DatePicker的默认值。 但是关键点在于，引用...
在antd4.0中Form使用initialValue操作
01-18
然后我在网上看用resetFields()这个方法，每次提交或者取消之后重置一下数据，然而我试了还是不得行，会变成每次点击显示的是上一次的数据，所以后面还是老老实实看了一下form的其他方法。 贴个图 解决 放弃initial...
为什么Atd的Form中，onFinish回调函数的values有时是合成事件对象，有时是表单字段的值
qq_53911056的博客
02-08 523
回调函数时，错误地传递了一个事件对象而不是表单字段值。这通常发生在处理表单提交事件时，没有正确地从事件处理函数中提取出表单字段值。：不同版本的 Ant Design 可能会有不同的行为。确保你使用的 Ant Design 版本与你的代码和文档相匹配。的参数有时是一个合成事件对象，这可能是由于某些特殊情况或代码错误导致的。回调函数的参数应该是一个包含了表单字段值的对象，而不是一个合成事件对象。：如果你使用了其他第三方库或自定义组件，并且这些组件与。组件有交互，它们可能会修改。的行为或传递不同的参数。
ant from表单的取值 onFinish的value不一样
youshuang1207的博客
11-10 1559
antd的表单验证
qq_52845451的博客
10-26 1601
antd的表单验证
Ant Design 表单常用组件总结
sxm666666的博客
07-22 351
Form 通过Form.useForm()对表单数据域进行交互 const [ form ] = Form.useForm(); // 创建form的控制实例 // form.setFieldsValue 设置表单的值，可以用于表单的回显操作 form.setFieldsValue({ keyword:'测试' }) // form.getFieldsValue 获取字段名对应的值， const keyword = form.getFieldValue('keyword') // 测试
vue2，vue3（antUI）按钮点击重复发送请求
weixin_44706441的博客
02-21 1362
一. vue2写法： <button :disabled="state" @click="clickbtn"></button> //在data里面定义state初始值为false data(){ return{ state:false } } //在methods里面写点击事件 async clickbtn(){ if(this.state === false){ this.state = true; await api.xxx() // 等api执行完后再
antd form表单使用的踩坑历程
my__road的博客
11-23 1778
'Instance created by `useForm` is not connect to any Form element.' nameList.map is not a function
OpenSNN推文：近期优质博客推荐汇总
最新发布
opensnn的博客
07-12 191
国内个人博客站点众多，涵盖了技术、生活、艺术等多个领域。
antd 基于ModalForm的自定义组件其他页面调用时传入的onFinish异步方法
05-26
如果您想在使用Ant Design的ModalForm组件时，将自定义组件传递给ModalForm组件，并在ModalForm组件中使用该自定义组件，并在其他页面中使用onFinish异步方法，可以按照以下步骤进行操作： 1. 在自定义组件中定义一个onFinish方法，该方法将在ModalForm组件中调用并处理表单数据。 2. 将自定义组件作为ModalForm组件的一个表单项传递，并将onFinish方法作为自定义组件的一个属性进行传递。 3. 在其他页面中，定义一个异步的onFinish方法，并将其作为ModalForm组件的onFinish属性进行传递。 下面是一个示例代码，您可以参考这个示例来理解如何在Ant Design中使用自定义组件和ModalForm组件： ``` // 自定义组件 MyComponent.js import React from 'react'; import { Form, Input } from 'antd'; const MyComponent = ({ onFinish }) => { return ( <Form onFinish={onFinish}> <Form.Item name="name" label="名字"> <Input /> </Form.Item> <Form.Item name="age" label="年龄"> <Input /> </Form.Item> </Form> ); }; export default MyComponent; // 在页面中调用 ModalForm.js import React from 'react'; import { Modal, Button } from 'antd'; import MyComponent from './MyComponent'; const ModalForm = ({ onFinish }) => { return ( <Modal title="标题" visible={true} footer={null}> <MyComponent onFinish={onFinish} /> </Modal> ); }; export default ModalForm; // 其他页面 OtherPage.js import React from 'react'; import { Modal, Button } from 'antd'; import ModalForm from './ModalForm'; const OtherPage = () => { const onFinish = async (values) => { console.log(values); // 异步处理表单数据 }; return ( <div> <Button type="primary" onClick={() => setVisible(true)}> 打开 Modal </Button> <ModalForm onFinish={onFinish} /> </div> ); }; export default OtherPage; ``` 在这个示例代码中，我们定义了一个自定义组件MyComponent，该组件包含一个Form表单，并且定义了一个onFinish方法，用于处理表单数据。 然后，在ModalForm组件中，我们将自定义组件作为一个表单项传递，并将onFinish方法作为自定义组件的一个属性进行传递。 最后，在其他页面中，我们定义了一个异步的onFinish方法，并将其作为ModalForm组件的onFinish属性进行传递。这样，在ModalForm组件中，当用户提交表单时，onFinish方法将被调用，并且表单数据将被传递到外部的onFinish方法中进行异步处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值