Antdesign Form 实现页面控件的赋值加载
使用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 实现页面控件的赋值加载的更多相关文章
- form表单中控件较多,加载完成后切换页面都很慢的解决方法
form表单中控件较多,加载完成后点击都很慢,为什么?我一页面中form表单里面上百个控件(如input.select.radio.checkbox等),还有一些js脚本,加载速度还可以,都能全部显示 ...
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- Winform DevExpress控件库(二) 使用SplashScreenManager控件定制程序加载页面
SplashScreenManager控件:主要作用是显示在进行耗时操作时的等待界面: 位于 工具箱 -> Navigation & Layout(导航栏与布局类控件) 目录下: 在工具 ...
- 使用SplashScreenManager控件定制程序加载页面
需要devexpress版本在12.0及以上才支持 https://www.cnblogs.com/wuhuacong/p/6112461.html 在DevExpress程序中使用SplashScr ...
- Webbrowser控件判断网页加载完毕的简单方法 (转)
摘自:http://blog.csdn.net/cometnet/article/details/5261192 一般情况下,当ReadyState属性变成READYSTATE_COMPLETE时,W ...
- asp.net读取用户控件,自定义加载用户控件
1.自定义加载用户控件 ceshi.aspx页面 <html> <body> <div id="divControls" runat="se ...
- 02、获取 WebView 控件中,加载的 HTML 网页内容
在开发 app 的时候,WebView 是经常使用的控件.而且有时需要向 WebView 中的 html 内容 注入额外的 js 进行操作.这里记录一下在当前 WebView 控件中,获取 html ...
- zTree 树形控件 ajax动态加载数据
很久没搞过树形控件了 , 再次接触看官网文档有点没懂,于是在网上找了个代码copy上,但数据是写死的,就想这在用ajax异步取出数据替换,下面是js代码 <SCRIPT type="t ...
- ElementUI Tree控件在懒加载模式下的重新加载和模糊查询
之所以使用懒加载是为了提高性能,而且只有在懒加载模式下默认会给所有显示节点设置展开按钮.leaf也可以做到,但是要操作数据比较麻烦. 要实现懒加载模式下的模糊查询以及重新加载必须要使用data与laz ...
随机推荐
- mumu 连接安卓studio
近期开发一个项目,折腾了好久,编写完程序后,真机上运行没有异常,而在MuMu模拟器上运行,程序总是中断(MuMu模拟器连接不上,只能打包好apk再放到MuMu上测试,有点蠢萌...),没办法调试,就获 ...
- springboot拦截异常信息发送邮件提醒
-- private JavaMailSender sender; 可能会出现注入错误,请注意yam配置文件中格式是否一致:否则会找不到注入的bean 一 发送邮件 在Springboot中发送邮件非 ...
- RBAC 权限模型
RBAC 0 模型 最基本的 MySQL 脚本,没有建立外键约束. /* Navicat Premium Data Transfer Source Server Type : MySQL Source ...
- 用Java实现一个二叉树
介绍 使用Java实现一个int值类型的排序二叉树 二叉树 二叉树是一个递归的数据结构,每个节点最多有两个子节点. 通常二叉树是二分查找树,每个节点它的值大于或者等于在它左子树节点上的值,小于或者等于 ...
- 阶段3 3.SpringMVC·_07.SSM整合案例_05.ssm整合之Spring整合SpringMVC的框架
点击超连接,执行controller里面的方法 那么就需要在Controller里面定义Service对象,就需要依赖注入进来. 启动tomcat服务器,web.xml里面的前端控制器会帮我加载spr ...
- SQL学习(七)试图
试图是基于SQL语句的结果集的可视化表. 1.创建试图 create view 试图名 as select 语句 如: create view ticketresult as select * fro ...
- 前端之路(二)之JavaScript:菜鸟教程学习:http://www.runoob.com/js/js-intro.html
JavaScript 语句和 JavaScript 变量都对大小写敏感. 键值对通常写法为 name : value (键与值以冒号分割). 键值对在 JavaScript 对象通常称为 对象属性. ...
- MySQL 将 字符串 转为 整数
MySQL 将 字符串 转为 整数 1.CAST(epr AS type) 1)type 为 SIGNED " AS SIGNED); 效果如下: 2)type 为 UNSIGNED &qu ...
- k8s1.11.0安装、一个master、一个node、查看node名称是ip、node是扩容进来的、带cadvisor监控服务
一个master.一个node.查看node节点是ip # 安装顺序:先在test1 上安装完必要组件后,就开始在 test2 上单独安装node组件,实现node功能,再返回来配置test1加入集群 ...
- k8s报错解决
. Jul :: lab3 etcd[]: the server is already initialized as member before, starting as etcd member... ...