在antd Form表单中select设置初始值操作


Posted in Javascript onNovember 02, 2020

我就废话不多说了,大家还是直接看代码吧~

<Form.Item label="作用对象">
      {getFieldDecorator('targetId', { initialValue: this.state.targetId }, {
       rules: [{
        required: false,
        message: '作用对象'
       }]
      })(
       <Select placeholder="请选择作用对象">
        {targetList.map(entity => <Option key={entity.id} value={entity.id}>{entity.name}</Option>)}
       </Select>
      )}
     </Form.Item>

在getFieldDecorator('targetId',时添加初始值而不是在select标签中添加初始值

补充知识:解决antd 表单获取不到默认值的问题

使用 antd 的 4.x 版本,给表单设置初始值,但是获取不到值

如果需要设置默认值并展示到页面上,需要设置两个地方:

设置 defaultValue,这个是用来展示在页面上的,例如:

<Form.Item label="Sex" name="sex" valuePropName="checked">
 //这里的defaultValue
 <Radio.Group defaultValue={1}>
 <Radio value={1}>男</Radio>
 <Radio value={0}>女</Radio>
 </Radio.Group>
</Form.Item>

设置 initialValues,这个是用来获取表单值的,例如:

<Form
 name="basic"
 onFinish={this.onFinish}
 onFinishFailed={this.onFinishFailed}
 initialValues={{
  sex: 1
 }}
 >
 <Form.Item label="Sex" name="sex" valuePropName="checked">
  <Radio.Group defaultValue={1}>
  <Radio value={1}>男</Radio>
  <Radio value={0}>女</Radio>
  </Radio.Group>
 </Form.Item>

 <Form.Item {...tailLayout}>
  <Button type="primary" htmlType="submit">
  register
  </Button>
 </Form.Item>
 </Form>

以上这篇在antd Form表单中select设置初始值操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
详解参数传递四种形式
Jul 21 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
详解react-redux插件入门
Apr 19 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
react+antd 递归实现树状目录操作
Nov 02 #Javascript
antd form表单数据回显操作
Nov 02 #Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 #Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 #Javascript
JavaScript实现刮刮乐效果
Nov 01 #Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 #Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 #Javascript
You might like
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
jquery ready()的几种实现方法小结
2010/06/18 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
Python聚类算法之基本K均值实例详解
2015/11/20 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
华为慧通面试题
2012/09/11 面试题
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
南京某公司笔试题
2013/01/27 面试题
怎样声明一个匿名的内部类
2016/06/01 面试题
银行职业规划书范文
2013/12/28 职场文书
应聘英语教师求职信
2014/04/24 职场文书
白酒代理协议书范本
2014/10/26 职场文书
经营目标责任书
2015/05/08 职场文书
观后感开头
2015/06/19 职场文书
小学安全教育主题班会
2015/08/12 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android