使用Antdesign Form时,当页面加载时,需要从后台获取数据,对Form中控件的默认赋值。看似比较简单的需求,而且Antdesign 官方文档中也有相应介绍,然后对于Form 的CheckBox 的默认值加载,文档中并没有涉及。

需求: 当页面记载时,从后台获取当前Form 对象值,然后将值加载到控件中。如下图,

Form控件定义方式如下, 官网中案例使用Form.create方法创建一个对象,mapPropsToFields方法完成对控件赋初值,对于Input, Select等控件是完全没问题,而对于checkbox 控件就无法生效了。

<FormItem label="Primary Keys" hasFeedback>
{getFieldDecorator('primayKey', {rules: [{ required: true, message: 'Please Input Primay Key!' }],})(
<Input placeholder="Please Input Primay Key" />)}
</FormItem>
<FormItem {...tailFormItemLayout}>
{getFieldDecorator('isIgnoreFirstRow')(
<Checkbox >Ignore First Row</Checkbox>
)}
</FormItem>
const ingform = Form.create({
name: 'ingestion_form' ,
mapPropsToFields(props) {
return {
primayKey:Form.createFormField({
...props.stepObj,
value:props.stepObj.paramMap.source_primary_keys
}),
ignoreFirstRow:Form.createFormField({
...props.stepObj,
value:props.stepObj.paramMap.source_is_ignore_first
}) }
}
})(IngestionForm);

察看了相关源码,不难发现,其实源码中有对其一定的描述,需要使用valuePropName对CheckBox 设置Checked状态。

所以将关于Checkbox 代码稍作修改,并且删除mapPropsToFields方法中定义Checkbox filed 代码段,就能正常工作了,而在form 中获取该字段的方法仍然和其他控件一样。

<FormItem {...tailFormItemLayout}>
{getFieldDecorator('isIgnoreFirstRow',{
valuePropName: 'checked',initialValue:stepObj.paramMap.source_is_ignore_first || false, })(
<Checkbox >Ignore First Row</Checkbox>
)}
</FormItem>

Antdesign Form 实现页面控件的赋值加载的更多相关文章

  1. form表单中控件较多,加载完成后切换页面都很慢的解决方法

    form表单中控件较多,加载完成后点击都很慢,为什么?我一页面中form表单里面上百个控件(如input.select.radio.checkbox等),还有一些js脚本,加载速度还可以,都能全部显示 ...

  2. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  3. Winform DevExpress控件库(二) 使用SplashScreenManager控件定制程序加载页面

    SplashScreenManager控件:主要作用是显示在进行耗时操作时的等待界面: 位于 工具箱 -> Navigation & Layout(导航栏与布局类控件) 目录下: 在工具 ...

  4. 使用SplashScreenManager控件定制程序加载页面

    需要devexpress版本在12.0及以上才支持 https://www.cnblogs.com/wuhuacong/p/6112461.html 在DevExpress程序中使用SplashScr ...

  5. Webbrowser控件判断网页加载完毕的简单方法 (转)

    摘自:http://blog.csdn.net/cometnet/article/details/5261192 一般情况下,当ReadyState属性变成READYSTATE_COMPLETE时,W ...

  6. asp.net读取用户控件,自定义加载用户控件

    1.自定义加载用户控件 ceshi.aspx页面 <html> <body> <div id="divControls" runat="se ...

  7. 02、获取 WebView 控件中,加载的 HTML 网页内容

    在开发 app 的时候,WebView 是经常使用的控件.而且有时需要向 WebView 中的 html 内容 注入额外的 js 进行操作.这里记录一下在当前 WebView 控件中,获取 html ...

  8. zTree 树形控件 ajax动态加载数据

    很久没搞过树形控件了 , 再次接触看官网文档有点没懂,于是在网上找了个代码copy上,但数据是写死的,就想这在用ajax异步取出数据替换,下面是js代码 <SCRIPT type="t ...

  9. ElementUI Tree控件在懒加载模式下的重新加载和模糊查询

    之所以使用懒加载是为了提高性能,而且只有在懒加载模式下默认会给所有显示节点设置展开按钮.leaf也可以做到,但是要操作数据比较麻烦. 要实现懒加载模式下的模糊查询以及重新加载必须要使用data与laz ...

随机推荐

  1. leetcode题目10.正则表达式匹配(困难)

    题目描述: 给你一个字符串 s 和一个字符规律 p,请你来实现一个支持 '.' 和 '*' 的正则表达式匹配. '.' 匹配任意单个字符'*' 匹配零个或多个前面的那一个元素所谓匹配,是要涵盖 整个  ...

  2. Java内存缓存-通过Map定制简单缓存

    缓存 在程序中,缓存是一个高速数据存储层,其中存储了数据子集,且通常是短暂性存储,这样日后再次请求此数据时,速度要比访问数据的主存储位置快.通过缓存,可以高效地重用之前检索或计算的数据. 为什么要用缓 ...

  3. redis的incr和incrby命令

    Redis Incr 命令将 key 中储存的数字值增一,如果 key 不存在,那么 key 的值会先被初始化为 0 ,然后再执行 INCR 操作. Redis Incrby 命令将 key 中储存的 ...

  4. python全栈开发第7天 nginx服务器和nfs的搭建及组成集群的方法

    作业一:nginx服务 二进制安装nginx包 1.使用命令:yum install epel-release -y ,来安装epel,安装成功如下图:(因为我用32位的centos7老是出现各种各样 ...

  5. 【导航】JennyHui 老白兔记录贴

    英语控 TED X - > 笔记 程序媛 2019-08-24 Java学习路径规划 思考记录 2018-08-24 常见的工作思考方式 浪费时间 百家讲坛 开卷八分钟

  6. java之数据填充PDF模板

    声明:由于业务场景需要,所以根据一个网友的完成的. 1.既然要使用PDF模板填充,那么就需要制作PDF模板,可以使用Adobe Acrobat DC,下载地址:https://carrot.ctfil ...

  7. windows安装python flask虚拟环境

    安装pipenv的虚拟环境主要是为了防止不同python版本之间冲突的问题,虚拟环境安装的包包不会对外部真实环境产生任何作用,只会作用于虚拟环境.这样,一个flask框架应用对应一个pipenv虚拟环 ...

  8. 阶段3 3.SpringMVC·_03.SpringMVC常用注解_6 CookieValue注解

    演示 访问服务器会有session.它是一cookie的形式返回给客户端的 拿到的值

  9. redis(3)主从与集群

    一.主从架构 yum安装的redis cd /etc/ cp redis.conf /etc/slave.conf vim slave.conf bind 192.168.42.7 slaveof p ...

  10. SQL Server 收集数据库死锁信息

    背景 我们在数据库出现阻塞及时邮件预警提醒中监控了数据库的阻塞情况,为了更好的维护数据库,特别是提升终端客户用户体验,我们要尽量避免在数据库中出现死锁的情况.我们知道收集死锁可以开启跟踪标志如1204 ...