解决Antd中Form表单的onChange事件中执行setFieldsValue不生效
Antd中Form表单的onChange事件中执行setFieldsValue不生效
如果在Form表单中onChange事件中,手写了一个setFieldsValue, 则不会生效。
原因是因为
Form表单会在手写的onChange事件之后执行内部的setFieldsValue,所以会将我们之前手写的setFieldsValue给覆盖掉。
解决方案
1. 使用setTimeout延时。此方案不推荐
2. 使用getValueFromEvent. 是当onChange的时候,更改form表单的值的情景下使用
<FormItem label="路由节点" {...nodelayout}> {getFieldDecorator(`node`, { rules: [ { required: true, message: '选择要指定的路由节点', }], getValueFromEvent: (val: any) => { let nodesArr = [] as any; for (let item of transferList) { for (let j of val) { if ((item as any).id === j) { nodesArr.push(item); } } } return nodesArr; } })( <Transfer operations={['>>', '<<']} dataSource={transferList} filterOption={(inputValue: any, option: any) => option.value.indexOf(inputValue) > -1 } showSearch lazy={false} targetKeys={targetKeys} onChange={transferHandleChange} onSearch={transferHandleSearch} render={item => item.value} />, )} </FormItem>
3. 如果你只想简单的更改表单的值setFieldsValue,而不是在onChange的时候触发。那么可以使用normalize. 与上述的getValueFromEvent类似,都是option的一个属性。
antd Design Form setFieldsValue的使用
最近项目使用的是antd Design 4.x 版本,碰到个需要加载后端数据并展示,并且用户可以进行修改的需求,前端采用的是antd的Form表单来实现
组件加载的时候向后端请求数据
componentDidMount() { gainCountry().then(res => { // 这里进行数据请求 ...... }) }
form表单要回填数据一般会想到的是initialValues,但是这是适用于初始化值的时候,官方文档的原话:“initialValues 不能被 setState 动态更新,你需要用 setFieldsValue 来更新”。
搜索一番setFieldsValue的使用,基本上都是:this.props.form.setFieldsValue, props自带form,试用之后发现报错,this.props下没有form,这个好像只适用于antd 3.x
解决
antd4.x 中使用setFieldsValue 是通过ref来进行操作,如下所示:
class Index extends Component{ constructor(props) { super(props) this.state = { } } // 创建一个ref formRef = React.createRef() render(){ return{ {/* 绑定到Form身上*/} <Form ref={this.formRef}> <Form.Item name="example"> <Input /> </Form.Item> </Form> } } } export default BaseInfo
在需要的地方进行使用:
// example 为Form.Item中的name this.formRef.current.setFieldsValue({ example: ‘从后台返回要显示的值', })
结束语
官方文档中都是有相关说明的,setFieldsValue 的使用我是在文档中的一个例子中找到的,碰到问题的时候还是要多阅读文档
以上为个人经验,希望能给大家一个参考,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/SpicyBoiledFish/article/details/108225
相关文章
- 本篇文章是对C#中WinForm控件之Dock顺序调整进行了详细的分析介绍,需要的朋友参考下...2020-06-25
- 这篇文章主要介绍了解决Antd Table表头加Icon和气泡提示的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17
- 这篇文章主要介绍了C# Winform中实现主窗口打开登录窗口关闭的方法,这在需要用户名密码的软件项目中是必用的一个技巧,要的朋友可以参考下...2020-06-25
- 下面小编就为大家带来一篇C# winform打开Excel文档的方法总结(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
antd Form组件方法getFieldsValue获取自定义组件的值操作
这篇文章主要介绍了antd Form组件方法getFieldsValue获取自定义组件的值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29- 这篇文章主要给大家介绍C# winform快捷键设置技巧,涉及到C winform快捷键相关知识,对C winform知识感兴趣的朋友可以参考下本篇文章...2020-06-25
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21c#中Winform实现多线程异步更新UI(进度及状态信息)
本篇文章主要介绍了c#中Winform实现多线程异步更新UI(进度及状态信息) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25- 这篇文章主要介绍了C#实现windows form限制文本框输入的方法,涉及C#限制文本框输入的技巧,非常具有实用价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了angularjs $http实现form表单提交示例,非常具有实用价值,需要的朋友可以参考下 ...2017-06-15
- 这篇文章主要为大家详细介绍了jquery插表单件form使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
- 这篇文章主要给大家介绍了关于c# winform异步不卡界面的实现方法,文中通过示例代码介绍的非常详细,对大家学习或者使用c#具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-06-25
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
C# WinForm程序处理后台繁忙导致前台控件假死现象解决方法
这篇文章主要介绍了C# WinForm程序处理后台繁忙导致前台控件假死现象解决方法,本文通过Application.DoEvents()解决这个问题,并讲解了Application.DoEvents()的作用,需要的朋友可以参考下...2020-06-25- 这篇文章主要介绍了C#中winform使用相对路径读取文件的方法,实例分析了C#使用相对路径读取文件的技巧与实际应用,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了解决antd Form 表单校验方法无响应的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-28
winform中的ListBox和ComboBox绑定数据用法实例
这篇文章主要介绍了winform中的ListBox和ComboBox绑定数据用法,实例分析了将集合数据绑定到ListBox和ComboBox控件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25- 这篇文章主要介绍了C#在Winform开发中使用Grid++报表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要为大家详细介绍了C# WinForm程序设计简单计算器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
C# WinForm控件对透明图片重叠时出现图片不透明的简单解决方法
这篇文章主要介绍了C# WinForm控件对透明图片重叠时出现图片不透明的简单解决方法,结合实例形式分析了WinForm图片重叠后造成图片不透明的原因与相应的解决方法,需要的朋友可以参考下...2020-06-25