表单onFinish/onSubmit在AntD中未触发 - 腾讯云开发者社区

文章/答案/技术大牛

发布

天天用 antd 的 Form 组件？自己手写一个吧

大家写中后台系统的时候，应该都用过 Ant Design 的 Form 组件：用 Form.Item 包裹 Input、Checkbox 等表单项，可以定义 rules，也就是每个表单项的校验规则。...这样在 Store 里就存储了所有表单项的值，在 submit 时就可以取出来传入 onFinish 回调。...在 Form 里保存 Store 到 Context，然后在 Item 里取出 Context 的 Store 来，同步表单值到 Store。...中，并且给原生 form 元素添加 onSubmit 的处理： import React, { CSSProperties, useState, useRef, FormEvent, ReactNode...其实原理不复杂，就是把 Form 的表单项的值存储到 Store 中。在 Form 组件里把 Store 放到 Context，在 Item 组件里取出来。

1K1 0

Ant Design 4.0 正式版来了！

更小的尺寸在 antd@3.9.0 中，我们引入了 svg 图标（为何使用 svg 图标？[3]）。...在 4.0 中，我们调整了图标的使用 API 从而支持 tree shaking，减少 antd 默认包体积约 150 KB(Gzipped)。...此外，每次数据变更便会进行整个表单的重新渲染，这使得在大数据表单中性能堪忧。...在 v4 版本中，Form 将自带表单实例，你可以直接通过 Form.Item 的 name 属性进行数据绑定，从而简化你的代码： - const { form } = this.props; - const...因而我们提供了 onFinish ，其只会在表单验证通过后触发，而 validateFields 不在需要。

3.7K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

带你用React从零实现一个Antd4 Form表单

前言在cms后台管理系统中，大家一定绕不开对Form表单的使用，接下来我们就来详细解析下Antd4 Form的背后实现以及数据仓库的知识。...那如果Form表单特别大，对性能肯定是有一定损伤的。（对antd3 Form的实现原理感兴趣的，可以留言，我后期有时间再总结一篇文章。）...完成表单校验之后，接下来我们要在FormStore中实现表单提交方法，即onFinish与onFinishFailed方法。...，我们已经基本上实现了一个Antd4 Form表单~ 当然，如果你想到里结束也可以，如果还想再完美一点，请继续往下：再完美一点~ 实现给表单预设值如果你很认真地在敲这些代码，你可能会发现，测试例子里的预设值并没有执行...实现这一的效果，在函数组件中可以使用useRef，类组件中也可以使用React.createRef。

1.8K2 0

antd4与antd3Form表单设计区别

核心 antd3思想：使用HOC（高阶组件）包裹form表单，HOC组件中的state存储所有的value值，定义设置值和获取值的方法缺点：动一发牵全身，一个value值改变，因为这是顶级状态，所以所有的子组件都会因父组件的重新...render而render,浪费了性能 antd4思想：使用Context 包裹form表单，自定义一个store类，存储所有的表单value值，定义设置值和获取值得方法，因为不是组件内部状态，需要自己定义更新函数...，在每个Form.Item中定义forceUpdate()强制更新函数，当我们setValue值得时候，根据name值判断出要更新的Form.Item,可以调用该Item的更新函数更新，相比ant3节约了性能... // onFinish={onFinish} onFinishFill={onFinishFill}> //...} onFinish={onFinish} onFinishFill={onFinishFill}> <Field name='username' rules={

2.4K2 0

Mock17-Antd高级模板组件ProComponents

升级好最新前端框架后，让我们回到Mock服务前后端的配置服务开发中，最开始我们已经学会了Antd pro的中后台框架的创建，以及使用Ant Design组件进行布局式开发前端页面。...可以显著地提升制作 CRUD 页面的效率，更加专注于页面拿项目解释下，我们之前在实现项目管理的时候，是一个个组件组装起来，并且需要对样式进行布局调整。而且大部分页面的无非就是表单，搜索和分页表。...对象中必须要有 data 和 success，如果需要手动分页 total 也是必需的。request 会接管 loading 的设置，同时在查询表单查询时和 params 参数发生修改时重新执行。...常用属性 params 用于 request 查询的额外参数，一旦变化会触发重新加载 columns 表格列配置和内部值的绑定与属性设置 actionRef Table action 的引用，便于自定义触发...formRef 是否显示搜索表单，传入对象时为搜索表单的配置 search 是否显示搜索表单，传入对象时为搜索表单的配置 onSubmit 提交表单时触发其他属性和参数配置，参考之前讲解的antd组件使用方式

1.3K1 0

Zod 深度解析：TypeScript 运行时类型安全的终极实践

前言在现代 TypeScript 开发中，我们经常面临一个关键挑战：编译时类型安全 ≠ 运行时数据安全。.../ RegisterForm.tsx import { useRequest } from"ahooks"; import { Button, Form, Input, message } from"antd...const onFinish = async (values: RegisterFormData) => { try { // 使用 zod 验证表单数据 const...表单和 useRequest 这类的数据请求结合起来，创建一个更加安全的表单提交场景。...最后 Zod 正在成为 TypeScript 生态中数据验证的事实标准，其设计哲学完美契合现代 TypeScript 应用的开发需求。

6311 0

92.精读《React PowerPlug 源码》

Hover 与 Focus 类似，只是触发时机为 Hover。...Form 这是一个表单工具，有点类似 Antd 的 Form 组件。...表单最重要的就是 field 函数，为表单的每一个控件做绑定，同时设置一个表单唯一 key: export default { field: id => { const value = values...在精读《Epitath 源码 - renderProps 新用法》文章中，笔者就介绍了利用 generator 解决高阶组件嵌套的问题。...在精读《React Hooks》文章中，介绍了 React Hooks 已经实现了这个特性。

1.4K3 0

Hooks + TS 搭建一个任务管理系统（三）-- 项目列表功能模块

这样，我们接下来就可以先写创建项目和编辑项目的模态框，我们只需要将被编辑的项目数据传递给模态框就可以了，对于创建项目，我们给一个空白的即可这里我们的抽拉效果，采用的是 antd 中的 Drawer 组件实现的...={{ textAlign: "right" }} > {/* 点击提交触发onFinish方法 */} 在刚打开时，组件未渲染导致报错的问题同时我们也可以发现，我们在当中设置了三元判断，这样是为了优化我们的用户体验，前面也提过了...useProjectModel 中已经暴露了 close 方法，我们只需要在 onFinish 中调用即可当 form 表单成功提交时，会自动调用 onFinish 方法，同时会将 form 表单中的数据作为参数...实现编辑，创建功能我们在点击编辑按钮时，首先需要弹出 modal 编辑信息点击保存后，才需要调用发送请求上代码首先先处理 modal 的显示和关闭（截取下拉框的关键代码）我们在点击编辑按钮时，会触发

1.5K3 0

React antd的基本使用

安装Antd首先，确保您的项目已经创建并配置了React环境。...然后，您可以通过以下命令使用npm或yarn安装Antd：npm install antd或yarn add antd安装完成后，您可以在项目中引入Antd组件并开始使用。...引入样式在使用Antd组件之前，您需要引入Antd的样式表。可以通过以下方式引入样式：import 'antd/dist/antd.css';将上述代码放置在项目的根组件或入口文件中即可。...Content>Content Footer );};export default Example;Form（表单...onFinish = (values) => { console.log('Form values:', values); }; return ( onFinish={onFinish

8262 0

浅谈表单受控性及结合Hooks应用

在本文中将介绍在 React 中受控和非受控表单是如何使用的，以及现代化使用 hooks 来管理 form 状态。...对于简单的表单，可以更快地实现功能。 dom更新性能频繁的 setState 触发视图的重新渲染可能会导致性能问题。...一个表单控件 value 值改变，便会影响整个表单查询渲染 antd4 中 form 组件设计思想：使用 Context 包裹 form 表单，并在 useForm() 时创建一个 FormStore...利用 useRef 的特性，在调用 useForm 的组件中，从创建到销毁等各种生命周期，无论组件渲染多少次，FormStore 只会实例化一次，在每个 Field 中定义 forceUpdate()...，使得表单状态不会直接受控件影响，而是在 setField/shouldUpdate/dependenciesUpdate 等逻辑触发时强制更新相依赖的控件，不会造成整个表单重新渲染的过多损耗。

1.8K1 0

Ory Kratos 用户认证

在 Register new account / Reset password 时，可访问虚拟 SMTP 服务 http://127.0.0.1:4436 接收邮件。...样式： @import '~antd/dist/antd.css'; 可见 antd 蓝色按钮组件。..., { key: index, }); })} 其中表单 onFinish 里处理提交： const onFinish = (values...但要注意的是，依据流程信息创建表单时，请区分 group 构建多个表单： const nodesGroup: Record< string, { title?...ui.method} onFinish={onFinish} > {v.title}

2.7K4 0

react hook+ts+rouerV6 dev notes

product={product} closeModal={closeModal} /> 挂载 <Form ref={formRef} > 关闭dialog时重置表单...中自动获取checkbox组件的值需要在chekbox中添加一个属性: valuePropName="checked" <Form ref={formRef} ...name="basic" layout="vertical" onFinish={onFinish} onFinishFailed={onFinishFailed...中获取到redux仓库中的值（封装了thunk）跟class的写法一样(前提是封装thunk) 先引用： import { connect } from 'react-redux' 然后使用： function...userInfo: state.app.currentUser.user } } export default connect(mapStateToProps)(AccountIndex); 然后在组件中获取

2.8K1 0

大厂都在用的一款表单解决方案

FormRender 是由飞猪推出的一款开源表单工具，通过 JsonSchema 协议渲染表单，为中后台表单业务提供开箱即用的通用解决方案。...良好的性能体验：通过对 FormRender 进行重构，底层采用 Antd Form 来实现表单的数据收集和管控，同时针对控件渲染层面进行优化处理，从而大幅提升性能，使得在使用过程中具有良好的性能体验。...formData:', formData); }; return ( <FormRender form={form} schema={schema} onFinish...={onFinish} footer={true} /> ); } 表单设计器对于一些自定义的表单样式，可以使用表单设计器进行自定义设计，拖拽导出 schema，丢到代码里生成可用表单...FormRender 还内置了许多高级功能：表单布局、表单联动、表单校验、常用交互、数据转换、自定义组件等其中内置的方法和功能大幅提高中后台系统中的表单开的灵活性，让开发者省略从头编写表单组件的繁琐步骤

1.3K4 0

React - 实现一个基于 Antd 的数值范围组件

需求原型使用场景当需求中需要录入数值范围的表单数据实现思路考虑到组件的共用性和拓展性，它应具备以下功能： 1、只能输入数字，选择 InputNumber 数字输入框，并继承该组件的所有API属性..., Row } from 'antd' import type { InputNumberProps } from 'antd/es/input-number' import { gt, toNumber...: ValuePair; // 表单控件的值 onChange?...使用方式 import { Button, Col, Form, Row, Space } from 'antd' import { compact, isNumber } from 'lodash'...={onFinish}> <Form.Item name="money

3380 0

react hooks + antd案例：列表的增删改

bug收集：专门解决与收集bug的网站网址：www.bugshouji.com 今日分享：React hooks + antd UI 实现增删改案例 1....表单中，具体的项使用 Form.Item： <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名!'...name值，是表单提交时，传入对象相对应的键名，为当前表单项输入的值。...const onFinish = (values) => { // values 通过values即可得到表单输入的值 } <Form form={form} name="FrmAddAdmin...，通过onFinish的参数，直接获取表单的输入 const onFinish = (values) => { console.log('Success:', values); updateAdminInfoById

1.3K2 0

antd3.x中的form

最近在维护公司的中台erp系统，项目中js库用的是react，ui库用的是antd。平时还是喜欢自己写css，刚开始还是有点不太习惯直接上ui库做项目，觉得用antd还是挺恶心的，主要是form。...在熟悉了以后发现这个库真棒。 react缺少类似vue的v-model这样的双向绑定机制, 所以在做表单的时候需要手动监听keyup,input,blur这一类的事件，会显得稍微麻烦一些。...而antd中的form则出了一个类似v-model的类似方法。它不仅仅提供了双向绑定功能，而且它还具有校验，取值，赋值，重置，数据搜集，提交功能。...antd官网双向绑定：getFieldDecorator 用法：该方法用在表单的子域里面，通过this.props.form.getFieldDecorator(id, options)进行使用，其中...() 提交数据这个类似于，通过使用form的onSubmit事件,在提交的button上进行用法如下 <Form labelCol={{ span: 5 }} wrapperCol={{ span:

2.5K3 0

Antd Form 实现机制解析

背景 “在中后台业务中，表单页面基础的场景包括组件值的收集、校验和更新。...在 to B 业务中，表单页面的需求往往更复杂和定制化，除了上述的基本操作，还要处理包括自定义表单组件、表单联动、表单的异步检验等复杂场景，在一些大型表单页面中还要考虑性能的问题，表单页面的需求往往是新同学摔得第一个跤...“因为我们在最顶层的 FormHocCustomizedForm 组件中调用 forceUpdate，forceUpdate 会跳过 shouldComponentUpdate 触发组件的 Render...在子组件 Render 的执行过程中， getFieldDecorator 方法从 fieldStore 中读取实时的表单数据以及校验信息，并通过注入 value 或者 valuePropName 的值设定的属性来更新表单...Antd Form 具有很好的灵活性，可以帮我们快速的实现表单需求，但是也存在一些问题，比如当表单中的任何一个组件值发生改变，触发 onCollect 数据收集、执行更新流程，都会调用 forceUpdate

3.2K2 0

react-开发经验分享-form表单组件中封装一个单独的input

在form表单中自定义封装一个input组件如果不做处理 form表单提交时是获取不到这个自定义组件的数据的这个坑对于新手来说真的是个大坑特别是对表单内的元素做提交不是很了解的人用ant的ui...框架来说明吧一个基础的表单 // ant表单组件 import { Form, Select, Input, Button } from 'antd'; const FormItem = Form.Item...}); } render() { const { getFieldDecorator } = this.props.form; return ( onSubmit...// 修改后的ant表单组件 import { Form, Select, Input, Button } from 'antd'; import SelectForm from '....}); } render() { const { getFieldDecorator } = this.props.form; return ( onSubmit

3.2K4 0

Ant Design

# 新建项目 ts项目 npx create-react-app my-app --template typescript yarn add antd yarn add axios # 表单提交表单可以直接用回调函数里面的...'; import type { TreeProps } from 'antd/es/tree'; import React, { useEffect, useState } from 'react';...，addForm.getFieldsValue(),提交请求时不会抓取tree的值提交数据方法，在onCheck方法里面对表单赋值新建及编辑时先清空上一次选中的keys keys可以时字符串数组也可以时...}, (error) => { return Promise.reject(error) } ) # api.d.ts 接口文档规定了数据格式，注意接口只有在ts...中存在其它文件可以直接使用，eg: API.IUser declare namespace API { interface IUser { id: number,

3.3K1 0

Mock21-接口数据管理实现

在最初的几篇讲页面实现的时候关于接口管理实现，只是在数据库造了些数据用于查询展示。...其中用了antd的高级组件protable，本篇我们在使用高级系列组件中的 ProForm +抽屉（Drawer）弹窗的方式来快速实现接口增改操作。...，保存数据通过是否有ID判断是insert还是update；前端点击新增或修改做对应的动作标记和抽屉表单显示，其中如果是修改要将所在行数据放到定义的变量中，如果是新增则至为空；抽屉表单中非修改属性要根据动作显示隐藏或不可编辑...；因ProForm和DrawerForm都有默认提交按钮，此处选择了后者，个人实现中根据设计规范可自行选择保留其一；注意之前篇章中升级过antd，所以新的js接口统一放到\services\ant-design-pro...实现，不在放在page下； DrawerForm 中 onFinish 实现前后端接口操作。

3231 0

点击加载更多

天天用 antd 的 Form 组件？自己手写一个吧

Ant Design 4.0 正式版来了！

带你用React从零实现一个Antd4 Form表单

antd4与antd3Form表单设计区别

Mock17-Antd高级模板组件ProComponents

Zod 深度解析：TypeScript 运行时类型安全的终极实践

92.精读《React PowerPlug 源码》

Hooks + TS 搭建一个任务管理系统（三）-- 项目列表功能模块

React antd的基本使用

浅谈表单受控性及结合Hooks应用

Ory Kratos 用户认证

react hook+ts+rouerV6 dev notes

大厂都在用的一款表单解决方案

React - 实现一个基于 Antd 的数值范围组件

react hooks + antd案例：列表的增删改

antd3.x中的form

Antd Form 实现机制解析

react-开发经验分享-form表单组件中封装一个单独的input

Ant Design

Mock21-接口数据管理实现

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐