在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 相关文章推荐
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
JQuery datepicker 使用方法
May 20 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 Javascript
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
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
php 购物车的例子
2009/05/04 PHP
PHP多线程类及用法实例
2014/12/03 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
jQuery select操作控制方法小结
2010/05/26 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
详解python多线程之间的同步(一)
2019/04/03 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
python 常见的反爬虫策略
2020/09/27 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
教师推荐信范文
2013/11/24 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
给面试官的感谢信
2014/02/01 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
校园环保建议书
2014/05/14 职场文书
作风整顿剖析材料
2014/09/30 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
导游词之西安骊山
2019/12/03 职场文书
php png失真的原因及解决办法
2021/11/17 PHP
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python