html表单中动态添加下拉框,antd Select下拉菜单动态添加option里的内容操作-程序员宅基地
技术标签： html表单中动态添加下拉框
antd Select下拉菜单动态添加option里的内容，通过form表单绑定select选中的值
提供一个公共的方法，每次只需去调用这个方法就行了
//这里是示例数据格式
let giftScope =[
{
code:200,
id:1,
name:"张三"
}, {
code:300,
id:2,
name:"李四"
}, {
code:400,
id:3,
name:"王五"
}, {
code:500,
id:4,
name:"赵六"
},
]
// 提供了一个在select里面添加公用Option内容的方法
//第一个参数为原数据(array)
//第二个为value----值为当前输入框内容对应的id或code唯一标识(不能为number会报错)
//第三个为内容
const renderOption = (arr , code , name) => arr ? arr.map( (item,index)=>{
return ({item[name]})
}) : null
{renderOption(giftScope,"id","name")}
配合form表单使用
//parameter可以是id，也可以是code或者其他需要的字段，调用renderOption方法时更改第二个参数即可
//通过form表单API获取到所有value值的parameter就为绑定的id或者code
{getFieldDecorator("parameter", {
rules: [{ required: false, message: "请选择" }],
})(
{renderOption(giftScope,"id","name")},
)}
补充知识：关于antd Select选择器
根据服务器端的值动态渲染 select的option值
在moddels里面直接处理数据
*getSiteOptionsAdmin({ payload }, { call, put }) {
try {
const { data } = yield call(notice.getSiteOptionsAdmin, payload);
if (data.code === 200) {
const menudata = [];
menudata.push(全部);
for (let i = 0; i < data.info.length; i++) {
menudata.push(
key={data.info[i].id}
value={data.info[i].id.toString()}
>
{data.info[i].title}
,);
}
yield put({ type: "save", payload: { getSiteOptionsAdmin: menudata } });
} else {
message.error(data.message);
}
} catch (error) {
console.log(error);
}
},
全部选项就是value值为0 的option值
export default connect((state) => {
return {
activityList: state.activity.activityList,
menudata: state.notice.getSiteOptionsAdmin,
};
})(Form.create()(QuestionList));
showSearch
placeholder="请选择站点"
style={ { width: "160px" }}
optionFilterProp="children"
onChange={this.handleChange}>
全部
{this.props.menudata.length > 0 ? this.props.menudata : []}
,以上这篇antd Select下拉菜单动态添加option里的内容操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持云海天教程。
原文链接：https://blog.csdn.net/Met_life/article/details/107100143
智能推荐
基于java+jdbc+servlet+jsp实现图书商城_javajdbc图书商城购买图书-程序员宅基地
文章浏览阅读2.8k次。1.网站前台首页_javajdbc图书商城购买图书
java中date类型之比较,获取整小时,前一天时间_dateformat 前一天-程序员宅基地
文章浏览阅读1.1w次。在开发web中,我们经常需要用到Date,但是常见的几种方法已经满足不了我们的开发需要,因此在这里拓展一下使用Date的其他方法获取我们想要的结果1. 获取前一天的时间//获取前一天的时间SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd"); Date date=new Date(); Calendar calenda..._dateformat 前一天
OVS 响应 OFPT_SET_CONFIG 过程分析-程序员宅基地
文章浏览阅读2.4k次。ovs 对于 OFPT_SET_CONFIG消息的处理过程非常简单，其实就是通过TCP协议（或其它）交换了几个整型值，而且交换机不需要对此消息进行回复；只需要解析出消息体（struct ofp_switch_config）然后设置max miss len 即可。通过分析Floodlight发送它的过程 和 OVS 处理它的过程，我们可以对openflow协议有更好的理解。下面是代码流程：_ofpt_set_config
使用C++编写STM32软件IIC_stm32 c++-程序员宅基地
文章浏览阅读1.8k次，点赞5次，收藏9次。最近在重构自己的平衡车代码，里面需要用到MPU6050的DMP，从中读取四元数进行欧拉角解算，但是看着软件IIC的代码实在是很变扭，因为之前不会C++，所以如果需要调用多个IIC设备，那么使用的时候就需要重复的去进行软件IIC底层代码的初始化，非常的麻烦，而且需要调整各个引脚，在学习过C++之后，发现类实在是太好用了，那么我就在想能不能通过类把软件IIC的底层进行封装，实现和arduino一样的编程效果，使用的时候只需要放入软件IIC的SCL和SDA对应的GPIO即可。_stm32 c++
如何成为一个更好的程序员，应重视哪些方面？-程序员宅基地
文章浏览阅读183次。点击蓝色“架构文摘”关注我哟加个“星标”，每天上午 09:25，干货推送！来源：www.cnblogs.com/xiaozhi_5638/p/10186940.html作者：周见智撤离一..._程序员要仔细很重要
CVE-2019-0708（BlueKeep）漏洞分析与复现_cve20190708漏洞复现-程序员宅基地
文章浏览阅读1.4w次，点赞8次，收藏87次。文章目录一、 漏洞简介1、漏洞介绍：2、漏洞原理：3、影响版本：二、 漏洞复现复现环境：复现过程：1、主机发现：2、使用MSF的漏洞模块：3、对靶机进行漏洞扫描：4、使用攻击模块，对靶机进行攻击5、使用POC，进行蓝屏攻击一、 漏洞简介1、漏洞介绍：2019年5月14日微软官方发布安全补丁，修复了 Windows 远程桌面服务的远程代码执行漏洞，该漏洞影响了某些旧版本的 Windows 系统。此漏洞是预身份验证，无需用户交互，这就意味着这个漏洞可以通过网络蠕虫的方式被利用，与2017年 WannaCr_cve20190708漏洞复现
随便推点
python自动化测试 | 接口自动化测试脚本如何写好？_测试自动化脚本怎么写-程序员宅基地
文章浏览阅读1.4k次，点赞9次，收藏17次。接口测试可以在没有前端界面下进行测试后端的功能校验在前端很难进行测试，因为前端已经有初步校验控制，所以接口测试可以发现很多在前端无法发现的问题提升测试效率，降低人工回归测试的人力成本与时间成本，缩短测试周期。真正的业务逻辑核心是后端。例子说明：有个登录页面，你要登上网站，就需要输入你的账号密码，把账号密码作为请求参数打登录接口，这时客户端会给服务器发个登录请求，服务器鉴权和校验通过之后，就登上去了。到这里就完成了一次接口的请求，或者说跑完了一条接口测试用例。_测试自动化脚本怎么写
cdh oozie 无法启动问题Could not load service classes, Cannot create PoolableConnectionFactory_e0103: could not load service classes, cannot crea-程序员宅基地
文章浏览阅读1.1k次。问题描述：在安装cdh元数据myslq高可用时，使用的是myslq主主复制+keepalived实现。期间发现切换时，出现如下异常信息！花了很长时间寻找问题的原因。因为切换的时候，使用本机命令行是可以连接的，但是夸服务器就无法连接，没有去这方面的尝试，后来使用navicate无法连接后，就推测是mysql高可用切换的问题导致的。问题分析：如果不重启keepalived，是无法实现切换和连接..._e0103: could not load service classes, cannot create poolableconnectionfacto
Federated Machine Learning学习笔记（一）：综述：概念与模型-程序员宅基地
文章浏览阅读2.2k次，点赞4次，收藏10次。开始将mobile与AI进行靠拢了，RL,FL,DL一网打尽，先多看看survey再说。本文主要来自于Federated Machine Learning: Concept and Applications，主要介绍了使用Federated Machine Learning的原因，常用的一些概念，以及目前存在的一些应用。为了鼓励自己好好学习，决定提炼核心思想，以备不时之需。一、Why we ne..._federated machine learning
如何在CentOS上将salt-minion部署到python2虚拟环境_venv-salt-minion-程序员宅基地
文章浏览阅读361次。如何在CentOS上将salt-minion部署到python2虚拟环境Salt Minion需要python2.x（python2.x于2020年1日退役）或python3.x和一组模块，这些模块在操作系统附带的默认python上不可用。WHY?通过在Python2.x venv（虚拟环境）中运行Salt Minion，这个venv中安装的所有包都不会干扰环境外的包，而只包含在这个虚拟环境中。简单地说，这个venv中的python sitepackages不会和系统内python sitepack_venv-salt-minion
android webview拍照,让 Android 的 WebView 支持 type 为 file 的 input，同时支持拍照-程序员宅基地
文章浏览阅读337次。Android 的 WebView 组件默认是不启用 type 为 file 的 input 的，需要在代码中做一些类似 hack 的编码(因为解决问题的目标对象的方法都是加了@hide注解的)才能召唤神龙。目标对象：WebChromeClient实例化一个目标对象，并重写它的几个隐藏方法(针对不同的Android系统版本，方法名和入参都不一样，所以方法有多个)，然后将目标对象作为参数传递给 We..._android webview 支持input 前置摄像头
深度学习技巧应用7-K折交叉验证的实践操作_k折交叉验证应用在训练模型中-程序员宅基地
文章浏览阅读1k次，点赞4次，收藏4次。大家好，我是微学AI，今天给大家介绍一下深度学习技巧应用7-K折交叉验证的实践操作。K折交叉验证是一种机器学习中常用的模型验证和选择方式，它可以将数据集分为K个互斥的子集，其中K-1个子集作为训练集，剩下1个子集作为验证集，重复K次，每次使用不同的验证集，最终平均所有结果作为模型的性能度量。针对数据量较少的时候，我们可以采取K折交叉验证提升模型的性能。_k折交叉验证应用在训练模型中