antd 下拉框怎么联动_antd下拉框联动使用步骤详解
这次给大家带来antd下拉框联动使用步骤详解,antd下拉框联动使用的注意事项有哪些,下面就是实战案例,一起来看一下。
先说一下效果要求,上面一个下拉框,下面一个,要求上面选中的时候,下面的内容要跟着变。
因为想到react是数据驱动的,就不打算再用jq的那种隐藏显示了,而是通过在执行类型下拉框的onChange事件中,去改变下面的下拉框的数据,渲染出不同的下拉选择。
定义数据:modeOptions是各个下拉框的值,由于选中号码的时候是输入框,这里号码的options为空。
constructor(props) {
super(props)
this.modeOptions = {
'channelMode': {options: ['通道1', '通道2', '通道3', '通道4'], text: '通道'},
'batchMode': {options: [1, 2, 3, 4, 5], text: '批次'},
'numberMode': {options: [], text: '号码'},
'areaMode': {options: ['福州市', '厦门市'], text: '区域'}
}
this.state = {
selectMode: 'channelMode'
}
this.selectMode = this.selectMode.bind(this)
}
然后在下拉框的选中事件中去设置seletMode的值,发现antd的下拉框只要直接定义onChange事件,回调函数的第一个参数就是selectMode的值。
selectMode(value) {
this.setState({
selectMode: value
})
}
然后在render里面进行一下数据处理
let modelLabel = this.modeOptions[this.state.selectMode].text;
let modelOptions = null;
if(this.modeOptions[this.state.selectMode].options.length !== 0) {
modelOptions = [];
this.modeOptions[this.state.selectMode].options.map((item, index) => {
modelOptions.push({item});
})
}
贴下代码:其实就是当选中的不是号码时,在第二个下拉框组件用上面的modelLabel和modelOptions来渲染下拉框,如果选择的是号码,就渲染一个输入框。
class DemandForm extends React.Component {
constructor(props) {
super(props)
this.modeOptions = {
'channelMode': {options: ['通道1', '通道2', '通道3', '通道4'], text: '通道'},
'batchMode': {options: [1, 2, 3, 4, 5], text: '批次'},
'numberMode': {options: [], text: '号码'},
'areaMode': {options: ['福州市', '厦门市'], text: '区域'}
}
this.state = {
selectMode: 'channelMode'
}
this.selectMode = this.selectMode.bind(this)
}
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
}
selectMode(value) {
this.setState({
selectMode: value
})
}
render() {
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 18 },
},
};
let modelLabel = this.modeOptions[this.state.selectMode].text;
let modelOptions = null;
if(this.modeOptions[this.state.selectMode].options.length !== 0) {
modelOptions = [];
this.modeOptions[this.state.selectMode].options.map((item, index) => {
modelOptions.push({item});
})
}
return (
{...formItemLayout}
label="定点执行类型:"
hasFeedback
>
{getFieldDecorator('selectMode', {
rules: [
{ required: true, message: 'Please select your country!' },
],
})(
按通道
按号码
按区域
按批次
)}
{...formItemLayout}
label={modelLabel}
hasFeedback
>
{getFieldDecorator('mode', {
rules: [
{ required: true, message: 'Please select your country!' },
],
})(
this.state.selectMode !== 'numberMode' ? {modelOptions} :
)}
);
}
}
const WrappedDemandForm = Form.create()(DemandForm);
相信看了本文案例你已经掌握了方法,更多精彩请关注php教程其它相关文章!
推荐阅读:
前端,HTT,计算机与网络
webkit-font-smoothing字体抗锯齿渲染使用案例详解
antd 下拉框怎么联动_antd下拉框联动使用步骤详解相关推荐
- linux下 卸载qt_Ubuntu14.04安装、配置与卸载QT5的步骤详解
1.之前我下载的是QT5.13版本但是安装结束后Qtcreator出现打不开,这里我推荐Qt5.9版本,下载网址如下: https://download.qt.io/official_releases ...
- Virtual PC 2007下虚拟机与本机双XP系统实现互联与上网详解
Virtual PC 2007下虚拟机与本机双XP系统实现互联与上网详解 1.在虚拟机安装windowsXP系统 2.为了不影响用来上网的原网卡,所以我们选择在主机上装一个虚拟网卡来与虚拟机进行通信, ...
- oracle表稅片整理,oracle_Oracle表碎片整理操作步骤详解,高水位线(HWL)下的许多数据 - phpStudy...
Oracle表碎片整理操作步骤详解 高水位线(HWL)下的许多数据块都是无数据的,但全表扫描的时候要扫描到高水位线的数据块,也就是说oracle要做许多的无用功!因此oracle提供了shrink s ...
- vue 事件调用 传参_对vue下点击事件传参和不传参的区别详解
如下所示: {{btn_text1}} {{btn_text2}} var _vm = new Vue({ data : { btn_text1 : '点击1' , btn_text2 : '点击2' ...
- linux centos7 mysql_Linux centos7环境下安装MySQL的步骤详解
Linux centos7环境下安装MySQL的步骤详解 安装MySQL mysql 有两个跟windows不同的地方 1).my.ini 保存到/etc/my.ini 2).用户权限,单独用户执行 ...
- click传值vue_对vue下点击事件传参和不传参的区别详解
如下所示: {{btn_text1}} {{btn_text2}} var _vm = new Vue({ data : { btn_text1 : '点击1' , btn_text2 : '点击2' ...
- win10mysql卸载与重装_win10下完全卸载+重装MySQL步骤详解
相信大家因为种种各样的原因,需要重新版安装MySQL.笔者就因为连接MySQL和Qt时出现问题,迫不得已选择把64bitMySQL换成了32bitMySQL.由于卸载不干净,安装会出现种种问题.现在把 ...
- 【机器学习】线性回归实战案例一:多元素情况下广告投放效果分析步骤详解
线性回归实战案例一:多元素情况下广告投放效果分析步骤详解 2 线性回归 2.1 案例一:多元素情况下广告投放效果分析 2.1.1 模块加载与绘图布局样式设置 2.1.2 加载数据和数据筛选 2.1.3 ...
- tecplot脚本在Linux系统下运行,Linux系统下安装Tecplot的步骤详解
众所周知,Tecplot是Linux系统中的数据分析软件,Tecplot的功能正在变得更加完善,使用的人群也在逐渐增多.下面,我们就跟随U大侠小编一起来看看Linux系统下安装Tecplot的步骤详解 ...
最新文章
- Cocos2d-x3.0 TestCPP文件夹笔记
- 【采集层】Kafka 与 Flume 如何选择
- Unix/Linux操作系统中如何在sqlplus/rman中使用方向键
- 信息学奥赛一本通(C++)在线评测系统——基础(三)数据结构—— 1338:【例3-3】医院设置
- html:(6):body标签和p标签
- js实现svg图形转存为图片下载
- Python+django网页设计入门(8):网站项目文件夹布局
- 房地产数字化营销方案-蓝图
- 打开word文档提示文件未找到_Word格式转换大全!三分钟把100份Word文档转为PDF、PPT、JPG文件...
- Codeforces - Serge and Dining Room
- 【STM32F4系列】【HAL库】【自制库】WS2812控制(软件部分)
- Deep Biaffine Attention for Dependency Parsing
- 斜渐近线b为0为什么不存在_向量的奇技淫巧——斜坐标系
- 2020洪灾地图_2020的汛情有多严重?居然已经到了这种地步!
- ES初探之——shard和replica
- 作文经典好词好句好段摘抄大全
- 报税系统代理服务器地址6,报税系统服务器地址怎么填
- GATOR齿轮---凯利讯半导体
- 计算机毕业设计Java医用物品管理系统(源码+系统+mysql数据库+lw文档)
- Unity 摄像机简介