在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 相关文章推荐
将文本输入框内容加入表中的js代码
Aug 18 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
Angular中$compile源码分析
Jan 28 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
深入了解JS之作用域和闭包
Jun 16 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
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
babel的使用及安装配置教程
2018/02/22 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
Python实现按中文排序的方法示例
2018/04/25 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
对于Python深浅拷贝的理解
2019/07/29 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
python利用faker库批量生成测试数据
2020/10/15 Python
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
外贸实习生自荐信范文
2013/11/24 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android