文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Antd Form 实现机制解析

背景 “在中后台业务中，表单页面基础的场景包括组件值的收集、校验和更新。...在 to B 业务中，表单页面的需求往往更复杂和定制化，除了上述的基本操作，还要处理包括自定义表单组件、表单联动、表单的异步检验等复杂场景，在一些大型表单页面中还要考虑性能的问题，表单页面的需求往往是新同学摔得第一个跤...20191210141722 Render 阶段 被 Form 管理的组件，需要使用 props.form.getFieldDecorator 来包装，在 Render 阶段需要调用 getFieldDecorator...“因为我们在最顶层的 FormHocCustomizedForm 组件中调用 forceUpdate，forceUpdate 会跳过 shouldComponentUpdate 触发组件的 Render...在子组件 Render 的执行过程中， getFieldDecorator 方法从 fieldStore 中读取实时的表单数据以及校验信息，并通过注入 value 或者 valuePropName 的值设定的属性来更新表单

3.2K20

Form 表单在数栈的应用(下)：深入篇

主要介绍 Form 表单的创建和 Form表单双向绑定（getFieldDecorator）。 后文中所提到的 Form 表单均为 Antd 3.x 中的 Form 组件，以下简称为 Form 表单。...createBaseForm 的作用是拷贝当前传递来的组件，也就是调用函数将当前组件传递下去作为被包装组件，最终返回一个被包装过的具备新属性的组件。...综合来看，Form.create(options) 实际上是对我们的业务组件进行了一次封装，进行了 Form 相关属性的初始化，挂载了一些需要使用的方法，并将这些方法添加到 props.form 下。...中； 挂载 props 到输入组件上时会从 fieldsStore中读取数据字段。...props.form 中，供开发者调用； 2、通过 getFieldDecorator 初始化表单的属性和值，达到双向绑定的效果； 3、校验通过，把数据存到 fieldsStore 中；校验不通过，

1.1K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Form 表单在数栈的应用(下)：深入篇

    后文中所提到的 Form 表单均为 Antd 3.x 中的 Form 组件，以下简称为 Form 表单。...createBaseForm 的作用是拷贝当前传递来的组件，也就是调用函数将当前组件传递下去作为被包装组件，最终返回一个被包装过的具备新属性的组件。...综合来看，Form.create(options) 实际上是对我们的业务组件进行了一次封装，进行了 Form 相关属性的初始化，挂载了一些需要使用的方法，并将这些方法添加到 props.form 下。...中； 挂载 props 到输入组件上时会从 fieldsStore中读取数据字段。...props.form 中，供开发者调用； 2、通过 getFieldDecorator 初始化表单的属性和值，达到双向绑定的效果； 3、校验通过，把数据存到 fieldsStore 中；校验不通过，把

    1.2K20

    数栈技术文章分享：你居然是这样的initialValue

    先说一下写着篇文章的契机，是因为回显，复杂表单的回显，让我觉得我对initialValue这个属性是有误解的。...Input组件没有设置value属性的话，就是一个非受控组件，它需要设置defaultValue，如果用户不手动改变Input的输入，那么Input就一直显示defaultValue指向的值（友情提示：...，接收props.detail，因为在models/list.js文件的state中已经初始化，所以，第一次render被渲染的值是“杭州”和“1”，点击“重新获取数据按钮”，这个时候props.detail...用户手动更新表单数据，比如在组件中手动输入，在组件中手动选择等等，在用户手动更新数据之后，initialValue的值改变不会更新表单值。 2....下面的例子中在生命周期函数componentDidMount中执行了setFieldsValue方法，其他不变，你会发现不管怎么点击“重新获取数据按钮”，城市对应的值都不会被更新，而总量对应的值却一直在更新

    1.3K10

    详细剖析｜袋鼠云数栈前端框架Antd 3.x 升级 4.x 的踩坑之路

    Form 从 v3 到 v4：https://sourl.cn/7TiRfp ● Form.create() 在 3.x 中，表单中任意一项的修改，都会导致 Form.create () 包裹的表单重新渲染...注意以下问题： ・将之前写在 getFieldDecorator 中的 name/rules 等移到属性中； ・初始化在 form 中处理，避免同名字段冲突问题； ・关于表单联动的问题，官方提供了 shouldUpdate...造成这样的误解是因为在 3.x 的版本中，一直存在一个很神奇的问题，受控组件的值会跟随 initialValue 改变。...● shouldUpdate 前面有说过，form 表单不再会因为表单内部某个值的改变而重新渲染整个结构，而设有 shouldUpdate 为 true 的 Item，任意变化都会使该 Form....Button 在 antd 3.0 中危险按钮采用 type。 使用如下：涉及改动点 type、dangr 属性。 Tabs 使标签页不被选中。

    4.9K30

    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节约了性能... {/* 函数组件不能使用hooks,这里有变化 */} {/*ref想在内部获取 react组件不能直接传递ref key 等属性...// 每个formitem上接收用户传入的name属性，和当前改的name是一个 的话，就调用这个组件更新方法 if (name === item.props.name)

    2.4K20

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

    在form表单中自定义封装一个input组件 如果不做处理 form表单提交时是获取不到这个自定义组件的数据的 这个坑对于新手来说 真的是个大坑 特别是对表单内的元素做提交不是很了解的人 用ant的ui...框架来说明吧 一个基础的表单 // ant表单组件 import { Form, Select, Input, Button } from 'antd'; const FormItem = Form.Item...在组件内部做后端数据请求 并渲染到子元素Option里 那么我们就需要从新封装自定义这个原生的Select组件 // 把Select单独提取出来 import React, { Component...) })} ) } } export default SelectForm; 并把这个自定义组件导入到原来的...form表单里 // 修改后的ant表单组件 import { Form, Select, Input, Button } from 'antd'; import SelectForm from '

    3.2K40

    10分钟精通Ant Design Form表单

    被人诟病的Form antd被人吐槽最多的除了彩蛋之外，那应该就是Form表单了。...写这篇文章不是为了吐槽Form表单，当然我也并没有更好的优化Form表单的方案，本文的目的是希望大家能够通过本文了解Form表单的本质，更好的使用的Form表单。...a-form-control专门用来劫持组件并注册是一个不错的选择，但是我不想让组件嵌套太深，所以我们还是使用a-form-item进行劫持组件，为了能够区分需要劫持的哪些组件，我们使用指令进行标记并传值...， 之所以使用指令是因为我们不应该为一个需要注册的组件传递一个不相关的属性，如果传递一个未经声明的属性，则该属性会被挂载到dom上，如果要声明属性，就必须对自定义表单控件添加额外约束。...举一个很简单也很常见的栗子： 在系统中同一份数据被多处组件(包含可编辑的Form)使用是常有的事情，我们在表单中改变这份数据，同时数据的改变同步到各个相关组件中，非常easy的完成了需求。

    3K30

    React 折腾记 - (6) 基于React 16.6 + Antd 3.10.7封装的一个声明式的查询组件

    ---- 抽离思路及实现 思路 合并props传递的值,尽可能的减少传递的东西(在组件内部实现默认值合并),把渲染的子组件通过遍历json去实现; 整个查询区域用的antd表单组件,聚合所有表单数据(自动双向绑定...,设置默认值等); 为了降低复杂度,子组件不考虑dva来维护状态,纯靠props和state构建,然后统一把构建的表单数据向父级暴露.....内部的state默认初始化都为空[antd对于日期控件使用null来置空],外部初始化可以用getFieldDecorator的initialValue,已经暴露 ---- 实现的功能 支持的props...antd要求的格式一致,除了个别用来判断或者渲染子组件的, 字段解释: ctype(controller-type:控件类型) attr(控件支持的属性) field(受控表单控件的配置项) searchItem...(若是用ts的小伙伴,运行时类型推断比这个强大的多,还不会打包冗余代码) 没发布npm , 只是提供我写的思路,对您有没有帮助,见仁见智 依赖moment,antd 可以自行拓展的点 比如垂直展示 比如表单校验

    2.9K10

    三分钟迁移 antd@4

    在咨询了豆酱老师得到了api 不会修改的承诺之后，我已经在自己的项目中迁移完成。第一时间享受到了的 antd@4 各种优势。 ?...重写的 table 和 from 解决很多遗留的疑难杂症，具体可以查看豆酱老师的 antd@4 系列文章[2]，里面详细写了心路历程，在 form 中我们不需要使用 getFieldDecorator...已 Pro 全区块为例，这两个方法分别出现了 87 和 22次，在我自己的一个维护项目中找到了142 个 getFieldDecorator ，更不用说为了封装组件 getFieldDecorator...如果碰到表单无法撑开的问题可以加入下面的代码： :global { .ant-legacy-form-item .ant-legacy-form-item-control-wrapper {...所有的官方区块也已经支持了 antd@4，请大家安心使用。如果想使用 antd 的 新特性，不打包全部的 icon， 可以尝试升级 ProLayout@5.0。

    2K30

    React 16.x折腾记 - (6) 基于React 16.x+ Antd 3.x封装的一个声明式的查询组件(实用强大)

    , props的autoSearch为true 仅有一个非Input控件的时候,去除卡片效果 抽离思路及实现 思路 合并props传递的值,尽可能的减少传递的东西(在组件内部实现默认值合并),把渲染的子组件通过遍历...json去实现; 整个查询区域用的antd表单组件,聚合所有表单数据(自动双向绑定,设置默认值等); 为了降低复杂度,子组件不考虑dva来维护状态,纯靠props和state构建,然后统一把构建的表单数据向父级暴露...内部的state默认初始化都为空[antd对于日期控件使用null来置空],外部初始化可以用getFieldDecorator的initialValue,已经暴露 实现的功能 使用姿势 组件的, 字段解释: ctype(controller-type:控件类型) ==> string attr(控件支持的属性) ==> object field(受控表单控件的配置项...,运行时类型推断比这个强大的多,还不会打包冗余代码 没发布npm , 只是提供我写的思路,对您有没有帮助,见仁见智 依赖moment,antd,lodash 可以自行拓展的点 比如垂直展示 比如表单校验

    71410

    ​Ant Disign 4.0 升级实践扑街指南 (一)

    背景 我们都知道， AntD 最近喜提了4.0, 更新了许多新特性，看的我是心花怒放， 喜不自胜。更贴心的是还提供了升级工具，看了一些文章介绍说能三分钟升级。...就挑了个简单的， 一个Form表单页。 v3 与v4的表单差别还是挺大的。...Form 组件现在自带数据域，因而 getFieldDecorator 也不再需要，直接写入 Form.Item 即可： // antd v3 const Demo = ({ form: { getFieldDecorator...editors=0011 在官网中， 也找到了这样的描述： 在 v3 版本中，修改未操作的字段 initialValue 会同步更新字段值，这是一个 BUG。...但是由于被长期作为一个 feature 使用，因而我们一直没有修复。在 v4 中，该 BUG 已被修复。initialValue 只有在初始化以及重置表单时生效。

    1.7K10

    Form 表单在数栈的应用(上): 校验篇

    本文的重点为 Form 表单的校验及在数栈中的应用，偏向于应用总结与心得分享。...二、什么是 Form 相信大家在日常开发中已经对 Form 表单的使用已非常精通了，但非常值得一提的是，可能大家对“Form的定义是什么？什么时候我们会选择用 form ？”这个问题却往往回答不好。...问题分析：从 antd 的使用角度来讲，有域值错误时不应当再继续进行后续操作，但存在这种极限情况，问题是由于自定义校验结果产生，而此自定义校验是存在时效性的，所以此时我们应该让自定义校验具有准确性，使用...5. table 与 form 的碰撞 (组件联动校验) 业务场景：数栈中其实存在各种与 form 联动的案例，笔者取 数据资产 (data-assets-front) 项目为例，在 table 中动态插入单条数据并实现可自定义校验内容...通常思路可能会有两个： 1.用 antd table 新增的 components 属性来自定义列表元素，以覆盖默认的 table 元素，再在自定义列表元素中使用 form ； 2.将 table 的每一行元素都看作一个独立的表单域

    2.6K20

    表单数据形式配置化设计

    表单数据形式配置化设计 https://www.zoo.team/article/form-data 前言 在日常的中后台系统开发中，表单是和我们打交道非常多的名词。...但是在一般的表单实现中、我们会做着很多重复的工作，不停在写 FormItem......，无论是在详情页中显示文本亦或是编辑页中的表单组件包裹的数据，其实本身所对应的都是同一个数据，只是展示形式不一样而已。...在这里我们暂时将数据的形式定为表单组件形式与文本形式。其实在实际的使用中，由于数据的收集形式不同，会出现第三种数据形式。...至此，针对实现数据详情与编辑形式的方案有了这样两种，表单与文本组合或表单与表单文本组合的实现。本次我选择表单与文本组合的方案。

    1.3K20

    React后台管理前端系统(基于开源框架开发)起步式

    因为我想跳出舒适区.接受更大的挑战,目前和vue并驾齐驱的React项目也很流程,很多公司也在使用.于是乎,技术栈就是用React了。...但是要从零搭建,时间上划不来,因为需要集成很多东西,基础建设就要耗费很长时间.于是乎在GitHub上一顿搜,Ok 找到了二个比较可靠的项目使用,一个是 ant-design-pro 另一个是antd-admin...一开始我选择的是antd-admin 因为代码比较规范,UI也比较符合我的审美.开始做吧 首先找到一个列表页，仔细阅读代码,弄清楚依赖关系,然后新建一个目录,把列表页的相关文件都拷贝进去, 配路由,设置权限...,先休息一下,别被这个问题让自己的眼光太局限,导致看不到问题的本质.在这个问题还没有解决的情况下,我又开始了另一个项目 ant-design-pro的尝试.因为我知道,那个页面没有显示数据的问题,我肯定会解决的...在搜素了很久我终于好到 rule是在那里 ......文章到这里就吿一段落了 剩余的就好理解了 属性一个项目还有一个方法就是打开项目的package.json 将里面的包 挨个查一遍,了解每个包的作用

    2.3K20

    Form 表单在数栈的应用(上): 校验篇

    本文的重点为 Form 表单的校验及在数栈中的应用，偏向于应用总结与心得分享。...二、什么是 Form 相信大家在日常开发中已经对 Form 表单的使用已非常精通了，但非常值得一提的是，可能大家对“Form的定义是什么？什么时候我们会选择用 form ？”这个问题却往往回答不好。...问题分析：从 antd 的使用角度来讲，有域值错误时不应当再继续进行后续操作，但存在这种极限情况，问题是由于自定义校验结果产生，而此自定义校验是存在时效性的，所以此时我们应该让自定义校验具有准确性，使用...5. table 与 form 的碰撞 (组件联动校验) 业务场景：数栈中其实存在各种与 form 联动的案例，笔者取 数据资产 (data-assets-front) 项目为例，在 table 中动态插入单条数据并实现可自定义校验内容...： 1.用 antd table 新增的 components 属性来自定义列表元素，以覆盖默认的 table 元素，再在自定义列表元素中使用 form ； 2.将 table 的每一行元素都看作一个独立的表单域

    1.8K20

    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)进行使用，其中...校验方法会校验在双向绑定getFieldDecorator中定义必填项required为true的所有字段 form.validateFields((err,value) => { if

    2.5K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券