Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >antd 如何同时获取一个select 的value和 label值

antd 如何同时获取一个select 的value和 label值

作者头像
杭州前端工程师
发布于 2018-06-15 03:57:19
发布于 2018-06-15 03:57:19
6.9K00
代码可运行
举报
文章被收录于专栏:前端大白专栏前端大白专栏
运行总次数:0
代码可运行

只需要在select上设置一个属性即可.

labelInValue 设置为true 就可以.

选中项的 label 会被包装到 value 中传递给 onChange 等函数,此时 value 是一个对象。

当然,用getFieldsValue 也同样会被同时获取到.

当然了,如果是在getFieldDecorator 中设置的话 ,需要在initialValue中设置好相关的值才行,比如

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<FormItem {...formItemLayout} label="项目类别">
  {
    getFieldDecorator('categoryId', {
      initialValue: {key:""},
      rules: [{
        required: true, message: '此项为必选',
      }]
    })(
      <Select labelInValue  disabled={t.props.editAble} style={{width: 120, marginTop: 5}} size={config.size}>
        <Select.Option value="">全部</Select.Option>
        <Select.Option value="cat1">类别1</Select.Option>
        <Select.Option value="cat2">类别2</Select.Option>
        <Select.Option value="cat3">类别3</Select.Option>
        <Select.Option value="cat4">类别4</Select.Option>
      </Select>
    )
  }
</FormItem>

只需要关注initialValue那一块便可以,其它的和正常书写代码内容是一样的,不然的话,会一直报错

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Rc-form: 消失的“Ta”
那是一个艳阳高照的早上,临近中休时间,小 H 正准备动身去吃午餐,突然,钉钉弹出了一条新消息:(登登登~)“您有一个新的 bug:表单点击提交按钮没反应”。自信的小 H 心想:这期的需求我不就给表单多加了几个字段嘛,怎么会影响到表单的提交功能呢?应该是提错 bug 了吧。于是,小 H 按照 bug 的描述复现起了场景:
政采云前端团队
2023/09/01
2440
Rc-form: 消失的“Ta”
Error: must set key for <rc-animate> children
在使用antd-design中的select的组件时候,报了这样的一个错误: Error: must set key for <rc-animate> children <FormItem {...formItemLayout} label={item.label} key={index}> { getFieldDecorator(item.paramName, { initialValue: [], })( <Select size={confi
杭州前端工程师
2018/06/15
1.6K0
Form 表单在数栈的应用(下):深入篇
后文中所提到的 Form 表单均为 Antd 3.x 中的 Form 组件,以下简称为 Form 表单。在 Form 表单在数栈的应用(上): 校验篇 中提到,我们生在一个最好的时代,其实是别人造好轮子帮我们做了一些事情,那我们今天看一看,别人的轮子是怎么造的,我们自己能不能实现。 留心过 Antd 的同学可能有印象,Antd 是基于 react-component 组件进行了 UI 封装,文章会以 react-component/form 的代码为主。
袋鼠云数栈
2022/01/19
9070
antd-design Form,Select联合使用 placeholder 不起作用问题
Contents 1 antd-design Form,Select联合使用 placeholder 不起作用问题 1.1 起因 1.2 排查 1.3 补充: antd-design Form,Sel
w候人兮猗
2020/07/01
2.1K0
数栈技术文章分享:你居然是这样的initialValue
先说一下写着篇文章的契机,是因为回显,复杂表单的回显,让我觉得我对initialValue这个属性是有误解的。
袋鼠云数栈
2021/05/14
1K0
数栈技术文章分享:你居然是这样的initialValue
React后台管理前端系统(基于开源框架开发)起步式
这个系统的搭建背景是这样的,有一个朋友想看到现有系统中的一些,用户数据,新闻数据,只需要看到,短期不需要增删改功能,让我搭建一个简单的后台系统给他看.接到任务作为一个有四年开发经验的人来说这也太简单了吧,开始干吧,最简单的办法是直接使用开源项目https://github.com/PanJiaChen/vue-element-admin 下载下来,把不要的路由去掉,新建几个表格路由,页面直接复制过来就用了.
拿我格子衫来
2022/01/24
2K0
React后台管理前端系统(基于开源框架开发)起步式
疫情期间,写的两个场景
嗯~这种实现的方式还是和舒服的,不用自己布局,不用自己再次思考逻辑;如果你想自己捣鼓一个,那你是真的闲,还不如花点时间捣鼓其他非编程的东西。
Jimmy_is_jimmy
2020/04/01
1.1K0
疫情期间,写的两个场景
最熟悉的陌生人 rc-form
我们也许会经常使用例如 Ant Design、Element UI、Vant 等第三方组件库来快速在项目中完成页面的布局效果和简单的交互功能。
政采云前端团队
2021/07/19
1.1K0
Form 表单在数栈的应用(上): 校验篇
本文的重点为 Form 表单的校验及在数栈中的应用,偏向于应用总结与心得分享。众所周知,我们生在一个最好的时代,antd 已经帮我们把绝大多数功能封装好了,即开即用, API 详尽,但即便如此,antd 开发人员依然在当前基础上一遍又一遍地做优化和探索,所以,笔者希望通过本文不仅能带给大家业务上的小技巧,还希望能带给大家一些思路上的启发。
袋鼠云数栈
2022/01/12
2.2K1
React 16.x折腾记 - (6) 基于React 16.x+ Antd 3.x封装的一个声明式的查询组件(实用强大)
根据ctype渲染的控件有Input,Button,Select,DatePicker,Cascader,Radio
CRPER
2024/02/06
2080
React 16.x折腾记 - (6)  基于React 16.x+ Antd 3.x封装的一个声明式的查询组件(实用强大)
React 折腾记 - (6) 基于React 16.6 + Antd 3.10.7封装的一个声明式的查询组件
根据ctype渲染的控件有Input,Button,Select,DatePicker,Cascader,Radio
CRPER
2018/12/12
2.7K0
猿实战09——实现你设计的类目系统
上两个章节,猿人君教会了你如何通过设计落地实现了属性库,今天我们继续来实现系统的另一个基石地位的模块——后台类目。
山旮旯的胖子
2020/09/07
7770
猿实战09——实现你设计的类目系统
详细剖析|袋鼠云数栈前端框架Antd 3.x 升级 4.x 的踩坑之路
袋鼠云数栈从 2016 年发布第⼀个版本开始,就始终坚持着以技术为核⼼、安全为底线、提效为⽬标、中台为战略的思想,坚定不移地⾛国产化信创路线,不断推进产品功能迭代、技术创新、服务细化和性能升级。
袋鼠云数栈
2023/03/06
4.2K0
React 实现一个markdown[2]
theme: channing-cyan highlight: a11y-light
用户4793865
2023/02/03
1.2K0
Python 数据可视化,常用看这一篇就够了
如果你想要用 Python 进行数据分析,就需要在项目初期开始进行探索性的数据分析,这样方便你对数据有一定的了解。其中最直观的就是采用数据可视化技术,这样,数据不仅一目了然,而且更容易被解读。
全栈程序员站长
2022/09/07
2.1K0
React 16.8.6 升级指南(react-hooks篇)
从官方的态度可以很容易看出是十分重视hooks这个特性的,并且官方直言我们期望 Hook 能够成为人们编写 React 组件的主要方式。并且从笔者的实践过程来看hooks不仅仅是一种新玩法,更重要的意义是可以帮助开发者做减法,减少代码量,减少维护成本,甚至减少理解成本。
腾讯IVWEB团队
2020/06/28
2.8K0
React源码解析之HostComponent的更新(下)
在上篇 React源码解析之HostComponent的更新(上) 中,我们讲到了多次渲染阶段的更新,本篇我们讲第一次渲染阶段的更新
进击的小进进
2020/03/18
2.8K0
React源码解析之HostComponent的更新(下)
精读《怎么用 React Hooks 造轮子》
上周的 精读《React Hooks》 已经实现了对 React Hooks 的基本认知,也许你也看了 React Hooks 基本实现剖析(就是数组),但理解实现原理就可以用好了吗?学的是知识,而用的是技能,看别人的用法就像刷抖音一样(哇,饭还可以这样吃?),你总会有新的收获。
黄子毅
2022/03/14
2.5K0
EngineerCMS核心代码
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/53367020
hotqin888
2018/09/11
1.4K0
一篇看懂 React Hooks
React Hooks 是 React 16.7.0-alpha 版本推出的新特性,想尝试的同学安装此版本即可。
前端迷
2019/08/05
3.8K0
推荐阅读
相关推荐
Rc-form: 消失的“Ta”
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验