前端 react+antd select二级联动问题√

最新推荐文章于 2023-01-05 09:52:45 发布
最新推荐文章于 2023-01-05 09:52:45 发布 1016 收藏 3
分类专栏： 学习 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ToBeBetterAlice/article/details/118675905
版权

1、问题
select二级联动时，出现了如下问题
比如省份的二级联动
北京市——北京
山东省——济南、泰安
当选择北京市北京之后，如果再选择山东省时，此时市级单位仍然是北京

2、解决
在省级单位变化的时候，同时设置如下内容，可以清空市级单位的选择
form.setFieldsValue({‘Form.Item的name’: ’ '});

阅读终点，创作起航，您可以撰写心得或摘录文章要点写篇博文。去创作
ToBeBetterAlice
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react+antd搭建后台管理框架
05-20
react+antd搭建前端管理框架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。目前只包含前端代码，未与后台进行关联实现菜单、用户等权限，若需要，则需进行二次开发。 访问链接：https://blog.csdn.net/weixin_48357332/article/details/124860395
解决Antd 里面的select 选择框联动触发的问题
01-22
有两个 select框，且这俩select框是关联的，触发select1，select2里面才会有值。 但是现在的问题是这样的： 触发select1，触发select2，再触发select1，此时select2里面的值变成了上次一选中的value 值，而不会被清空。 解决办法： 使用Select 里面的value属性，来进行清空 <Form style={{padding:'20px','boxSizing':'border-box'}}> <Select defaultValue={packag
简单的用React+antd实现简单Select 下拉多级联动；
alonesupermen的博客
07-15 4958
##用React+antd实现简单Select 下拉多级联动； 1. 首先看state内的值 this.state = { select:[] , //1级下拉内容 select2:[], // 2级下拉内容 status:true, //2级禁用状态 select3:[], //3级下拉内容 select4:[], //4级下拉内容 } 2. -利用 comp
【React】手写Antd Select联动效果组件
qq_53512708的博客
08-12 1834
但是这个联动的例子是写死的，无法通过配置的形式直接生成（即传入后台请求回来的需要联动的数据直接生成两个甚至三个四个联动的select），组件复用性不强，并且当表单提交的时候无法获取到两个select组件的value。1. 生成如下的数据结构，使得除了第一个select，其他的select依赖上一个select选中的value。3.从props中获取Form.Item中的提供的onChange方法，当下拉框选项改变的时候调用。3.如何在表单提交时也可以获取到所有select组件的value？...
Axios 的两种使用方法简单示例
luzhaopan的博客
08-27 5225
在编写文件代码的过程中，往往需要请求后台的数据，下面介绍一下 Axios 方法的简单使用 1、直接使用，以下代码为在Vue文件中的 methods 方法中定义的获取后台数据的方法 methods: { // 连接后台获取数据的方法 getData () { let params = { lt: '20180411', ...
React+antd后台管理系统模板
12-01
基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React，页面主要还是展示页面,比较简单不涉及后台交互的系统模板Demo
react-antd-admin:react + ts + antd实现的管理系统模版
03-11
react-antd-admin 基于react + ts + antd建立的管理后台脚手架模版 线上地址 git地址 单独使用 详情请查看 1.配置抽屉 1-1。可缓存系统配置 记录用户使用的系统配置，缓存浏览器中，记录用户习惯。 1-2.antd换肤...
React+Antd+Redux实现待办事件的方法
10-17
主要介绍了React+Antd+Redux实现待办事件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
react-antd-ts-admin:react + antd + typescript的后台管理系统
03-11
项目简介基于React+AntD+TypeScript的后台管理系统技术依赖React-（UI框架） 蚂蚁设计-（组件库） TypeScript-（静态类型） Webpack 轴距较少的功能登录/退出全屏浏览一键换肤个人中心侧边菜单标签快捷导航图标表单...
ant react design select不支持搜索
weixin_39818813的博客
01-05 194
搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。若通过 options 属性配置选项内容，建议设置 optionFilterProp=“label” 来对内容进行搜索。
react 利用select编写省市级三级联动
xiaoxiaofly的博客
09-26 3551
以下是代码（实现的代码部分） selectProvience:'',//变化选中的省份 selectNextProvience:'',//变化选中的市级单位 provienceInfo:[],//获取省份信息 provienceNextInfo:[],//获取省份的下一级信息 provienceNextsInfo:[],//获取县级信息 // 获取省市县 getAddr...
React---javascript(两个下拉列表的级联选择功能（联动菜单））
qq_41279327的博客
04-07 1974
练习： 实现两个下拉列表的级联选择功能（联动菜单） 省市联动即可： 例如：第一个下拉列表有选项：北京、河北、山东 当选中北京时，第二个下拉列表中显示：顺义、朝阳、海淀、丰台 当选中河北时，第二个下拉列表中显示：石家庄、廊坊、保定、秦皇岛 当选中山东时，第二个下拉列表中显示：济南、青岛、日照、东营 <!DOCTYPE html> <html lang="zh"&gt...
React实现列表联动
qq_36590338的博客
04-09 1405
函数类别：
react select、option标签实现省市联动
JxufeCarol的博客
03-27 1576
中国省市数据 “北京市”,[“北京市”], “天津市”,[“天津市”], “河北省”,[“石家庄市”, “唐山市”, “秦皇岛市”, “邯郸市”, “邢台市”, “保定市”, “张家口市”, “承德市”, “沧州市”, “廊坊市”, “衡水市”], “山西省”,[“太原市”, “大同市”, “阳泉市”, “长治市”, “晋城市”, “朔州市”, “晋中市”, “运城市”, “忻州市”, “临汾市”...
select联动菜单(点第一个select里面的值的时候，第二个select随着第一个的点击而发生变化)
笑到世界都狼狈的博客
09-11 2797
这两天项目中有个查询功能是要做联动菜单，既：我点击第一个下拉列表的查询条件的时候，第二个下拉列表中的内容要变成第一个下拉列表当前值所对应的选项。 思考了几分钟，想到的最简单的方法就是对第二个下拉列表做显示隐藏，当第一个列表发生变化的时候显示该显示的列表，隐藏其他的下拉列表。 在写的过程中遇到一个问题就是select的点击事件没有用，上网查了一个发现select支持onchange事件，不支持c...
antd默认清除select选中的内容（最简便方式）
WQ1104133568的博客
07-12 5797
前段时间我呕心沥血解决了antd默认清除select选中的内容问题，之后和朋友说起这个事情，她说： import React from 'react'; import AddModal from './addmodal'; class Parent extends React.Component { state = { visible: false }; render () { const { visible } = this.state;
antd3x配合reacthook实现级联多选
Jdoit CW的博客
02-21 1697
级联多选，reacthook，antd3x
antd级联选择器（a-cascader）动态加载和动态回显效果实现
zzzz121380的博客
12-06 5227
​ 需要实现级联选择器动态拿到每一层级的数据并显示，同时在编辑数据时弹框回显对应的层级关系。​ 给组件添加 这个属性就可以实现单独勾选一级、二级、三级组织关系。（官方api没有写）​ 首先先在html里 模态框上写上a-cascader组件 （2）data数据 （3）实现动态加载数据 ​ 先实现只有动态加载数据的功能（根据官网https://1x.antdv.com/components/cascader-cn/示例即可实现） 2、methods方法 注意：（初始化时会先获取第一层级的数据） 3、
antd的select二级联动
最新发布
05-18
antd的Select组件可以通过设置`onSelect`事件和动态改变`options`属性来实现二级联动。 假设我们有以下数据： ```js const options = [ { label: '北京', value: 'bj', children: [ { label: '海淀区', value: 'hd', }, { label: '朝阳区', value: 'cy', }, ], }, { label: '上海', value: 'sh', children: [ { label: '浦东新区', value: 'pd', }, { label: '徐汇区', value: 'xh', }, ], }, ]; ``` 我们需要在Select组件中，选中第一级选项后，动态的更新第二级选项。实现的代码如下： ```jsx import React, { useState } from 'react'; import { Select } from 'antd'; const { Option } = Select; const options = [ { label: '北京', value: 'bj', children: [ { label: '海淀区', value: 'hd', }, { label: '朝阳区', value: 'cy', }, ], }, { label: '上海', value: 'sh', children: [ { label: '浦东新区', value: 'pd', }, { label: '徐汇区', value: 'xh', }, ], }, ]; function CascadingSelect() { const [cities, setCities] = useState(options[0].children); const handleCityChange = (value) => { const city = options.find((item) => item.value === value); setCities(city.children); }; return ( <div> <Select defaultValue={options[0].value} style={{ width: 120 }} onSelect={handleCityChange}> {options.map((option) => ( <Option key={option.value} value={option.value}> {option.label} </Option> ))} </Select> <Select style={{ width: 120 }} defaultValue={cities[0].value}> {cities.map((city) => ( <Option key={city.value} value={city.value}> {city.label} </Option> ))} </Select> </div> ); } export default CascadingSelect; ``` 在这个例子中，我们在第一个Select组件中设置了`onSelect`事件，当选中北京或上海时，会触发`handleCityChange`函数，动态的更新第二个Select组件中的选项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ToBeBetterAlice

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值