我的Antd表单在使用测试库中的setFieldsValue后未设置值 - 腾讯云开发者社区

● validator 在 antd3 时，我们使用 callback 返回报错。但是 antd4 对此做了修改，自定义校验，接收 Promise 作为返回值。...setFieldsValue 设置值： setFieldsValue({ sideTableParam: [ { primaryKey: 'xxx', primaryValue...通过这次 UI 升级和 antd 升级之后，Form 表单在数栈中的应用发生了较大的变化，从老版本的 label/component 横向排版改为了纵向改版，在横向空间不⾜的情况下，使⽤上下结构能有效提...● table.checkbox ・问题描述升级后，checkbox 宽度被挤压了。・解决方案通过在 rowSelection 中设置 columnWidth 和 fixed 解决。...后，发现一些表格分页器多了 pageSize 切换的功能，代码中 onChange 又未对 size 做处理，会导致底部分页器 pageSize 和数据对不上，因此需要各自排查 Table 的 pagination

4.1K3 0

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

背景我们都知道， AntD 最近喜提了4.0, 更新了许多新特性，看的我是心花怒放，喜不自胜。更贴心的是还提供了升级工具，看了一些文章介绍说能三分钟升级。...正文首先是从这篇文章开始的：很多公众号也转发了这篇文章，很吸引人，我也想体验一下。扑街第一步: antd4-codemod 看官方介绍：一键转换！我滴龟龟，也太好了吧！！马上安排！...扑街第一步：antd4-codemod 运行 antd4-codemod src 控制台: 出师未捷身先死问题不大，我们老实人不怕这个。缺少core-js, 那就装一个。...editors=0011 在官网中，也找到了这样的描述：在 v3 版本中，修改未操作的字段 initialValue 会同步更新字段值，这是一个 BUG。...但是由于被长期作为一个 feature 使用，因而我们一直没有修复。在 v4 中，该 BUG 已被修复。initialValue 只有在初始化以及重置表单时生效。

1.5K1 0

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

是的

没有找到

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

前言在cms后台管理系统中，大家一定绕不开对Form表单的使用，接下来我们就来详细解析下Antd4 Form的背后实现以及数据仓库的知识。...那如果Form表单特别大，对性能肯定是有一定损伤的。（对antd3 Form的实现原理感兴趣的，可以留言，我后期有时间再总结一篇文章。）...，是不是发现default的预设值已经给name的input加上咯~ 让Form支持ref 有没有发现，我们刚刚的测试例子里创建数据仓库用的是useForm这样的自定义hook，而且自定义hook只能用在函数组件中...实现这一的效果，在函数组件中可以使用useRef，类组件中也可以使用React.createRef。...我个人的话，前不久写可视化编辑器的时候，就参考这个Form表单，然后没有用redux和mobx，而是自己实现了一个数据状态管理库，算是学以致用了。

1.4K2 0

antd3.x中的form

最近在维护公司的中台erp系统，项目中js库用的是react，ui库用的是antd。平时还是喜欢自己写css，刚开始还是有点不太习惯直接上ui库做项目，觉得用antd还是挺恶心的，主要是form。...而antd中的form则出了一个类似v-model的类似方法。它不仅仅提供了双向绑定功能，而且它还具有校验，取值，赋值，重置，数据搜集，提交功能。...antd官网双向绑定：getFieldDecorator 用法：该方法用在表单的子域里面，通过this.props.form.getFieldDecorator(id, options)进行使用，其中...}], })()} 虽然有双向绑定，但是在某些时候，也会用到设置值与获取值的方法，则会使用到setFieldsValue,getFieldsValue...注意:要使用这些api，一定要把对应的 field 用 getFieldDecorator 进行注册。设置值：setFieldsValue 通过setFieldsValue对其他控件进行赋值。

2.2K3 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节约了性能...（个人觉得这个思想类似Vue了，涉嫌抄袭） ant4简单原理展示基本用法,拷贝整理下可测试 //FormPage页面函数组件和类组件略有差异，类组件会用到神奇的React.forwardRef...== item); } } // 设置字段值，接收一个对象 setFieldsValue = (newVal) => { this.store =

2K2 0

React动态添加标签组件

背景在前端开发的过程中,一些表单的输入经常需要输入多个内容,如果采用一个输入框+逗号分隔的方式,展示起来不是很清晰,一般需要采用标签的方式需求可以指定空状态时的标题设置标签颜色每个标签的最大长度...:handleInputConfirm 拿到之前的标签+本次输入的,一起放到tags变量中给表单设置一下这个值(用分隔标记拼接起来) 隐藏输入框清空输入框 /* * 新增一个tag * */ const...,将它展示出来判断字符串长度,如果大于我们配置的最大长度则裁剪,没有则全部展示超长的标签增加一个气泡提示,鼠标移动上去后可以看到全部内容 {tags.map((tag) => { const isLongTag...join(separator) }); }; 编辑状态当我们处于编辑状态的时候,打开表单后,它原本就有内容了监听一下表单的内容,如果存在,则使用分隔标记分隔后塞入tags中 useEffect((...}; export default TagInput; Antd3.x完整代码 antd3.x中部分组件的用法不一样,需要修改一下折叠源码 import React, { useEffect,

4726 0

列表页常见的 hook 封装

构建属于自己的 React hooks 工具库。培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。...针对使用 Antd 的系统，在 ahooks 中主要是通过 useAntdTable 和 usePagination 这两个 hook 来封装。...并根据请求的参数以及返回的 total 值，得出总的页数。...form) { return; } // antd v4 if (isAntdV4) { return form.setFieldsValue(allFormDataRef.current...初始化的表单数据可以填写 simple 和 advance 全量的表单数据，开发者可以根据当前激活的类型来设置表单数据。修改 type 的时候会重置 form 表单数据。

1.7K2 0

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

从 context 中读取对应 name 的 values 的值，同步设置 value：然后 React.cloneElement 复制 chilren，额外传入 value、onChange 等参数...在 App.tsx 测试下： import { Button, Checkbox, Input } from "antd"; import Form from "....试一下： form 的 initialValues 的设置、表单的值的保存，规则的校验和错误显示，都没问题。这样，Form 组件的核心功能就完成了。...核心就是一个 Store 来保存表单的值，然后用 Item 组件包裹具体表单，设置 value 和 onChange 来同步表单的值。...setFieldsValue({ username: '东东东' }) }}>设置表单值 <Form ref

3101 0

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

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

1K1 0

Antd for Vue使用Form组件报错You cannot set a form field before rendering的解决方法

使用 Antd for Vue 的 setFieldsValue 赋值时报错：warning.js?...报错的场景：页面编辑时，获取接口数据，进行回显。使用 setFieldsValue 给 v-decorator 赋值时报错。...); 报错的原因： this.form.setFieldsValue 传值的时候只能是 form 中用到的参数（即是 getFieldDecorator 方法中的 field ）没有的 field 一律不允许多传...这里，多传递了多余的字段，自己检查一下，看看是否传递了页面中没有的字段。...未经允许不得转载：w3h5-Web前端开发资源网 » Antd for Vue使用Form组件报错You cannot set a form field before rendering的解决方法

1K2 0

react模态框表单总结

antd的表单操作比较细致，功能较多，我们工作中常用的无非增加内容的表单和编辑的表单，增加内容的表单初始化时，大部分默认值为null的装填，偶尔有一些需要设置初始值，如性别或者一些必选属性。...antd中提供了第二种模式，我们可以使用initvalue设置初始值，此时表单初始化时会根据这个值来初始化表单，所有初始化的操作都是根据这个值。...还有就是表单提交时，是使用表单上form的事件，还是从form中提取值后在提交，也是有选择的，前者可以用绑定form的form获取表单数据，后者可以绑定form的事件，前者的话数据验证再提交函数中，后者的话可以根据...这里有个问题，如果表单提交后，当前组件需要更新，那么还需要传递一个函数给模态框，方便模态框提交数据后再调用更新函数，关于提交函数是传递过去，还是定义在当前组件，我有如下的看法，一般的情况下我会定义在模态框中...以上便是我对模态框表单使用的总结，希望对你有所帮助

901 0

react 在使用数据请求的时候和setState的时候哪个先处理

今天在工作中遇到一个问题,我司使用的是antd 组件,在使用react数据请求时,并在其中设置setState,页面发现了异常....我写这一部分需求时的代码如下: // 初始化需求申请界面数据 initializeMyModal = () => { // 当调出项目发生改变时,获取调出人员下拉数据 myModalItems[...: 如图然后再去调用调出项目的selectOnChange事件,调出人员的位置变成了罗慧的value值, 如图: 这什么原因,我们这边的前端说法是:两个异步的调用,一个异步请求,一个setState,...当异步请求的时候,setState也是异步更改数据,当数据请求成功时,便遗留了上一个的value值,这样的解释很牵强,欢迎大神来留言....我能提供的解决方案: 当调出项目selectOnChange的时候,调用一个同步的方法,把调出人员的select设为空.在antd中可以直接使用this.props.form.setFieldsValue

1.1K5 0

Antd 中 Form.Item name 属性不生效问题

问题 Form.Item 中设置了 name 属性，但是 Form 中的 onValuesChange 并没有生效。...2.你不能用控件的 value 或 defaultValue 等属性来设置表单域的值，默认值可以用 Form 里的 initialValues 来设置。...3.你不应该用 setState，可以使用 form.setFieldsValue 来动态改变表单值。...但在上面 BasicFormItem 中，我只接收了 form 和 schema 参数，所以并没有生效，所以可以修改成如下： - const BasicFormItem = ({ form, schema...返回元素的 props 是将新的 props 与原始元素的 props 浅层合并后的结果。

2.5K3 0

Antd for Vue使用Form组件报错You cannot set a form field before rendering

使用 Antd for Vue 的 setFieldsValue 赋值时报错：warning.js?...报错的场景：页面编辑时，获取接口数据，进行回显。使用 setFieldsValue 给 v-decorator 赋值时报错。...this.form.setFieldsValue({ //数据回显 id: res.data.result.id, linkPhone: res.data.result.linkPhone, }...); 报错的原因： this.form.setFieldsValue 传值的时候只能是 form 中用到的参数（即是 getFieldDecorator 方法中的 field ）没有的 field 一律不允许多传...这里，多传递了多余的字段，自己检查一下，看看是否传递了页面中没有的字段。

8.4K3 0

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

二、什么是 Form 相信大家在日常开发中已经对 Form 表单的使用已非常精通了，但非常值得一提的是，可能大家对“Form的定义是什么？什么时候我们会选择用 form ？”这个问题却往往回答不好。...API 回顾如下：示例场景1: （标签引擎项目）场景描述：表单在第一次自定义校验时失败报错，经排查为在校验的时刻账号权限不足，此时我们给予该用户应该具备的权限（此时弹窗未关闭），再次点击确定发现并无效果...问题分析：从 antd 的使用角度来讲，有域值错误时不应当再继续进行后续操作，但存在这种极限情况，问题是由于自定义校验结果产生，而此自定义校验是存在时效性的，所以此时我们应该让自定义校验具有准确性，使用...options 参数，设置 force 为 true，让每一次“提交”（校验值）操作的之前都必须重走一遍所有校验逻辑。...（下图为标签业务中的一个历史功能，代码暂略）问题分析：由于项目历史原因，我们抛开设计问题暂不表，直接讨论校验方案。

2.2K2 0

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

1.3K2 0

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

bug收集：专门解决与收集bug的网站网址：www.bugshouji.com 今日分享：React hooks + antd UI 实现增删改案例 1....删除数据设置columns时，给删除按钮，添加事件,将传递当前行的id { title: '操作', key: 'action', render: (_, record) => ( 中，具体的项使用 Form.Item： <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名!'...name值，是表单提交时，传入对象相对应的键名，为当前表单项输入的值。...form.setFieldsValue 显示对应的值 useEffect(()=>{ getAdminInfoById(id).then(data=>{ if(data.code

9242 0

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

在form表单中自定义封装一个input组件如果不做处理 form表单提交时是获取不到这个自定义组件的数据的这个坑对于新手来说真的是个大坑特别是对表单内的元素做提交不是很了解的人用ant的ui...框架来说明吧一个基础的表单 // ant表单组件 import { Form, Select, Input, Button } from 'antd'; const FormItem = Form.Item...handleChange = (value) => { this.triggerChange(value); } // triggerChange 方法把获取到的 value 值返回给父级...表单里 // 修改后的ant表单组件 import { Form, Select, Input, Button } from 'antd'; import SelectForm from '....}], })( 的值'} user={'传给SelectForm的值'} /

2.9K4 0

结合Ant Design2.x总结在实际项目开发中遇到的问题

,key是你在使用Form时通过getFieldDecorator 方法与表单进行双向绑定时的参数id,详见ant文档中的Form使用方法帮我们保存很好,但是当我们点击删除时会不会出现什么问题？...使用Form组件后删除时会出现的问题及解决方法 ? 可以看到直接删除demoData[i] 无论我们删除第几项表单中的数据始终是“删除”最后一项。...如何实现一个受控选择的树和遇到的问题及解决方法项目需要一个这样的树：每一个树节点都代表的是一个职级，所以子节点全选中不代表父节点选中，父节点选中代表子节点全选中，这个时候Antd中的树组件就不满足我们项目的需求了...(写时遇到的坑)写这样受控的树时不要用Form了，因为勾选时想给自己setFiledValue是不支持的，上网查是因为 “antd中form表单的setFieldsValue只能设置其他域的值，不能控制自己表单域的值...” 所以这里推荐使用state去改变组件的value属性赋值。

1K2 0

使用mono-repo实现跨项目组件共享

本文会分享一个我在实际工作中遇到的案例，从最开始的需求分析到项目搭建，以及最后落地的架构的整个过程。最终实现的效果是使用mono-repo实现了跨项目的组件共享。...其实除了上面可以看到这些会重复外，我们往深入想，交个水费，我们肯定还需要用户输入姓名，卡号之类的信息，所以点了水费的卡片后肯定会有一个输入信息的表单，而且这个表单在柜员界面和客户界面基本是一样的，除了水费表单外...我们也是这么想的，但是公共组件库有多种组织方式，我们主要考虑了这么几种：单独NPM包再创建一个项目，这个项目专门放这些可复用的组件，类似于我们平时用的antd之类的，创建好后发布到公司的私有NPM仓库上...这个是使用lerna create默认生成的目录结构，__test__文件夹下面放得是单元测试内容，lib下面放得是代码。..."antd": "4.9.4" 这个例子中admin-site和customer-site需要的antd版本都是3.1.0，但是common需要的版本却是4.9.4，如果使用lerna bootstrap

3.1K4 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

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

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

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

antd3.x中的form

antd4与antd3Form表单设计区别

React动态添加标签组件

列表页常见的 hook 封装

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

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

Antd for Vue使用Form组件报错You cannot set a form field before rendering的解决方法

react模态框表单总结

react 在使用数据请求的时候和setState的时候哪个先处理

Antd 中 Form.Item name 属性不生效问题

Antd for Vue使用Form组件报错You cannot set a form field before rendering

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

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

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

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

结合Ant Design2.x总结在实际项目开发中遇到的问题

使用mono-repo实现跨项目组件共享

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐