如何在getfielddecorator antd中动态改变initialValue？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

一、initialValue的出处和定义 initialValue的出处： AntDesign/Form表单件/getFieldDecorator(id，options)装饰器函数/第二个参数options...链接地址：https://ant.design/components/form-cn/#getFieldDecorator(id,-options)-%E5%8F%82%E6%95%B0 关于属性initialValue...不是说好不会跟着数据的改变而改变的嘛？逗我玩还是~ 敲黑板，划重点，initialValue值可以被更新，除了下面两种情况： 1....用户手动更新表单数据，比如在组件中手动输入，在组件中手动选择等等，在用户手动更新数据之后，initialValue的值改变不会更新表单值。 2....当执行了setFieldsValue方法之后，initialValue的值改变不会更新表单值。

1.3K1 0

React Hook技术实战篇

Hook在中文的意思是钩子, 而在react也是充当这个角色, Hook是服务于函数组件的方法, Hook提供了各种API, 如State Hook提供类型setState的功能, Effect Hook..., useEffect的中的fetchData会再次被触发, 从而实现手动触发数据订阅的效果....这也就是使用Effect Hook来获取数据的方式, 关键在useEffect的第二个参数所依赖的项, 当依赖的项发生改变时, 第一个参数的内的函数也会被再次触发, 如果没用发生改变, 则不会再次执行,...Reducer Hook返回一个状态对象和一个改变状态对象的函数....例子中, 获取的数据和loading状态没有发生改变, 不过都聚合到了reducer中, 又Reducer Hook集中管理. const dataFetchReducer = (state, action

5K8 0

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

是的

没有找到

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

在 4.x 中，不在需要 getFieldDecorator 对 Item 进行包裹。...造成这样的误解是因为在 3.x 的版本中，一直存在一个很神奇的问题，受控组件的值会跟随 initialValue 改变。...如： getFieldDecorator('sideTableParam.primaryKey') getFieldDecorator('sideTableParam.primaryValue') getFieldDecorator...在项目中经常在 TreeItem 中增加参数，如：。...但在 antd4 中，获取参数的数据结构发生了改变，原先直接通过 props 点出来的不行了。・有两种方式取值： 1）不使用 props。

4.9K3 0

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

前言最近把新的后台系统写好了..用的是上篇文章的技术栈(mobx+react16); 但是感觉mobx没有想象中的好用,看到umi 2.x了.就着手又开始重构了......---- 抽离思路及实现思路合并props传递的值,尽可能的减少传递的东西(在组件内部实现默认值合并),把渲染的子组件通过遍历json去实现; 整个查询区域用的antd表单组件,聚合所有表单数据(自动双向绑定...内部的state默认初始化都为空[antd对于日期控件使用null来置空],外部初始化可以用getFieldDecorator的initialValue,已经暴露 ---- 实现的功能支持的props...submit"> 下载报表复制代码数据源格式 data的数据格式基本和antd...Row, Col, Input, Button, Select, DatePicker, Card, Cascader, Radio, Icon, } from 'antd

2.9K1 0

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

主要介绍 Form 表单的创建和 Form表单双向绑定（getFieldDecorator）。后文中所提到的 Form 表单均为 Antd 3.x 中的 Form 组件，以下简称为 Form 表单。...留心过 Antd 的同学可能有印象，Antd 是基于 react-component 组件进行了 UI 封装，文章会以 react-component/form 的代码为主。...供开发者调用； 2、通过 getFieldDecorator 初始化表单的属性和值，达到双向绑定的效果； 3、校验通过，把数据存到 fieldsStore 中；校验不通过，把 error 存到 fieldsStore...中，渲染。...2.1 getFieldDecorator /** * 实现 getFieldDecorator 方法 * 初始化时将 initialValue 赋值给输入框的 value * 输入框变化时可以拿到

1.1K1 0

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

后文中所提到的 Form 表单均为 Antd 3.x 中的 Form 组件，以下简称为 Form 表单。...留心过 Antd 的同学可能有印象，Antd 是基于 react-component 组件进行了 UI 封装，文章会以 react-component/form 的代码为主。...供开发者调用； 2、通过 getFieldDecorator 初始化表单的属性和值，达到双向绑定的效果； 3、校验通过，把数据存到 fieldsStore 中；校验不通过，把 error 存到 fieldsStore...中，渲染。...2.1 getFieldDecorator /** * 实现 getFieldDecorator 方法 * 初始化时将 initialValue 赋值给输入框的 value * 输入框变化时可以拿到

1.2K2 0

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

扑街第一步：antd4-codemod 运行 antd4-codemod src 控制台: 出师未捷身先死问题不大，我们老实人不怕这个。缺少core-js, 那就装一个。...直到又爆了新的错误：搜索到一些答案：按照文章中的提示，逐个修改，等待安装。运行一下，还是不行。。。表情逐渐凝固。这时候已经六七点了，看看外面，天都黑了。...Form 组件现在自带数据域，因而 getFieldDecorator 也不再需要，直接写入 Form.Item 即可： // antd v3 const Demo = ({ form: { getFieldDecorator...editors=0011 在官网中，也找到了这样的描述：在 v3 版本中，修改未操作的字段 initialValue 会同步更新字段值，这是一个 BUG。...在 v4 中，该 BUG 已被修复。initialValue 只有在初始化以及重置表单时生效。所以， initialValue 只能作为组件初次挂载的时候生效。

1.7K1 0

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

前言最近把新的后台系统写好了..用的是上篇文章的技术栈(mobx+react16); 但是感觉mobx没有想象中的好用,看到umi 2.x了，就着手又开始重构了。...仅有一个非Input控件的时候,去除卡片效果抽离思路及实现思路合并props传递的值,尽可能的减少传递的东西(在组件内部实现默认值合并),把渲染的子组件通过遍历json去实现; 整个查询区域用的antd...内部的state默认初始化都为空[antd对于日期控件使用null来置空],外部初始化可以用getFieldDecorator的initialValue,已经暴露实现的功能使用姿势 <AdvancedSearchForm...'; // lodash 深比较 import isEqual from 'lodash/isEqual'; // antd const { MonthPicker, RangePicker } =...渲染的数据这些 return { data: newData, prevData: nextProps.data }; } return null; } // 清除表单数据中字符串的两边的空格

6951 0

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

本文的重点为 Form 表单的校验及在数栈中的应用，偏向于应用总结与心得分享。...首先是存在多层 form 嵌套的问题，也就是说同一个页面里可能还包含或嵌入多个 form 表单，类似问题的核心就在于如何在一个页面中拿到当前容器的 form 实例和嵌套的 form 示例。...5. table 与 form 的碰撞 (组件联动校验) 业务场景：数栈中其实存在各种与 form 联动的案例，笔者取数据资产 (data-assets-front) 项目为例，在 table 中动态插入单条数据并实现可自定义校验内容...(`mapping[${index}].ip`, { initialValue: ip || "", validateFirst...对于 antd 4.x 的 form 校验，这里也做了一个简单的总结，有兴趣的同学可以移步 antd form 4.x 进行探究：首先对于「声明式」校验有个改变： <Form.Item {...formItemLayout

2.6K2 0

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

1.7K2 0

Error: must set key for children

在使用antd-design中的select的组件时候,报了这样的一个错误: Error: must set key for children { getFieldDecorator(item.paramName, { initialValue: [],...Select.Option> ) }) } ) } 原因是我在select中设置了...mode = 'multiple',并把initialValue的值设为了[''],便报了这样的错误了....解决文案:只需要把initialValue的值默认设为空,或者设为不是空字符串的文字

1.7K6 0

表单数据形式配置化设计

表单数据形式配置化设计 https://www.zoo.team/article/form-data 前言在日常的中后台系统开发中，表单是和我们打交道非常多的名词。...obj.name || '-' : getFieldDecorator('name', { initialValue: obj.name,...obj.sex || '-' : getFieldDecorator('sex', { initialValue: obj.sex,...obj.phone || '-' : getFieldDecorator('phone', { initialValue: obj.phone,...= [], ...itemRest } = rest; return (getFieldDecorator(field, { initialValue, rules: [

1.3K2 0

v-decorator的取值与赋值

经过 getFieldDecorator 或 v-decorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger...你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。...你不应该用 v-model，可以使用 this.form.setFieldsValue 来动态改变表单值。

1.6K2 0

v-decorator的取值与赋值

9.7K1 0

Antd Form 实现机制解析

具体到真实的业务场景，往往更复杂，其中包含多种表单组件，如 Input、Checkbox、Radio、Upload，还有一些自定义表单组件。 ?...Form 组件流程分析我们通过 Antd Pro 中登录页面的实现来一起看一下，Form 内部的调用流程。...在这个阶段还会收集组件的元数据，也就是我们调用 getFieldDecorator 中传入的 option 配置，这些配置会存入 fieldStore 的 fieldsMeta 对象中，作为组件的元数据...“Form 通过 getFieldDecorator 对组件进行包装，接管组件的 value 和 onChange 属性，当用户输入改变时，触发 onCollect 或 onCollectValidate...Antd Form 具有很好的灵活性，可以帮我们快速的实现表单需求，但是也存在一些问题，比如当表单中的任何一个组件值发生改变，触发 onCollect 数据收集、执行更新流程，都会调用 forceUpdate

3.2K2 0

10分钟精通Ant Design Form表单

被人诟病的Form antd被人吐槽最多的除了彩蛋之外，那应该就是Form表单了。...自身状态改变了所以进一步讲，包装组件的目的就是为了被包装组件的父组件更新，一旦被getFieldDecorator修饰过的组件触发onChange事件，便会触发这个父组件的的更新(forceUpdate...如：Form.create()(A) A就是我们所说的被包装组件注册(getFieldDecorator)： getFieldDecorator的目的是为了把需要收集的数据在实例中进行注册，并把注册的值同步到被...举一个很简单也很常见的栗子：在系统中同一份数据被多处组件(包含可编辑的Form)使用是常有的事情，我们在表单中改变这份数据，同时数据的改变同步到各个相关组件中，非常easy的完成了需求。...但很多时候我们希望表单数据改变后并不需要及时的同步到其它组件中，而是当用户点击确定按钮后才将数据同步，我们就不得不将这份数据进行复制甚至是深复制来满足需求，甚是蛋疼。

3K3 0

antd4与antd3Form表单设计区别

核心 antd3思想：使用HOC（高阶组件）包裹form表单，HOC组件中的state存储所有的value值，定义设置值和获取值的方法缺点：动一发牵全身，一个value值改变，因为这是顶级状态，所以所有的子组件都会因父组件的重新...render而render,浪费了性能 antd4思想：使用Context 包裹form表单，自定义一个store类，存储所有的表单value值，定义设置值和获取值得方法，因为不是组件内部状态，需要自己定义更新函数...({ children, form, onFinish, onFinishFill }, ref) { // 这里调用useForm,获取咱们定义的api, 函数组件会在父组件直接获取，这里传如进去...error) => { onFinishFill(error) }) }}> {/* 利用context传如咱们定义的...callback(null, this.state) } } // 高阶函数，包裹input给它实现双向绑定，跟state通讯，直接改变

2.3K2 0

三分钟迁移 antd@4

升级点首先对我而言最大的改进在于性能，select ，table 和 tree 已经全面支持了虚拟滚动，作为了早早的使用了 rc-tree来解决性能问题的人，antd@4 中提供自然是更好不过了，毕竟自己写样式和动态是非常复杂的...重写的 table 和 from 解决很多遗留的疑难杂症，具体可以查看豆酱老师的 antd@4 系列文章[2]，里面详细写了心路历程，在 form 中我们不需要使用 getFieldDecorator...已 Pro 全区块为例，这两个方法分别出现了 87 和 22次，在我自己的一个维护项目中找到了142 个 getFieldDecorator ，更不用说为了封装组件 getFieldDecorator...使用方式如下 : yarn add umi-plugin-antd-icon-config -D 并且在 config.ts 中设置 export default { plugins:[['umi-plugin-antd-icon-config...由于 4.0 的 icon 有一些删改，如果发现图标消失，请在 antd 官网中寻找合适的进行替换。

2K3 0

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

这个系统的搭建背景是这样的，有一个朋友想看到现有系统中的一些,用户数据,新闻数据,只需要看到,短期不需要增删改功能,让我搭建一个简单的后台系统给他看.接到任务作为一个有四年开发经验的人来说这也太简单了吧...但是要从零搭建,时间上划不来,因为需要集成很多东西,基础建设就要耗费很长时间.于是乎在GitHub上一顿搜,Ok 找到了二个比较可靠的项目使用,一个是 ant-design-pro 另一个是antd-admin.../routes/List/TableList我们看到果然是我们要寻找的页面, 改一二个文字刷新一下页面,果然改变了.好开心.第一步就这样完了....我们要对这个库或组件有个大致印象,比如我们要在页面修改antd 的Dropdown组件,就要去antd官文看看有那些参数可以调整.....then(res => { if (res.data.code === 0) { this.caseTypeList = res.data.data } }) 少年不要迷茫了,要接受改变

2.3K2 0

React项目依赖升级

.x) roadhog(https://github.com/sorrycc/roadhog)已经是2018的技术了,很久没有维护了,并且随着技术的发展,其他第三方包的依赖要求也发生改变,需要修改更多的...webpack配置来适应,但是roadhog暴露的配置入口比较少,很多配置无法设置,它自己也升级到了umi(https://github.com/umijs/umi) antd3.x中的Form组件使用比较麻烦...// 修改后使用 const { form } = props; // 修改前 const [form] = Form.useForm(); // 修改后 html部分修改前 const { getFieldDecorator...} = form; {getFieldDecorator('version', { rules: [{ required: true, message...import { changeFullScreen } from '@/store/modules/config'; const dispatch = useDispatch(); // 获取到state中的值

5911 0

点击加载更多

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

React Hook技术实战篇

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

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

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

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

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

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

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

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

Error: must set key for children

表单数据形式配置化设计

v-decorator的取值与赋值

v-decorator的取值与赋值

Antd Form 实现机制解析

10分钟精通Ant Design Form表单

antd4与antd3Form表单设计区别

三分钟迁移 antd@4

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

React项目依赖升级

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐