龙空技术网

React + Ant Design实现省市区联动

王佳楠的网络日志 99

前言:

而今朋友们对“react select联动”可能比较注意,大家都需要了解一些“react select联动”的相关文章。那么小编同时在网摘上搜集了一些对于“react select联动””的相关资讯,希望你们能喜欢,咱们快快来学习一下吧!

前言

相信许多从事web前端开发的同学,在日常开发后台管理系统时,都会遇到一个比较常见的需求,那就是省市区的选择,目前Ant Design官方的组件提供了两种解决方案,分别是Select选择器Cascader级联选择

分析

首先来看Cascader组件的官方示例代码,如下图所示,可以看出省市区的数据是统一存放在options的数组中,这种方式适合将所有的省市区数据存放在单独的文件中使用的开发场景。然而,在有些开发场景下,省市区的数据会分开存放在三个接口中,这时使用Select组件会相对方便。

具体代码

目前官方的Select组件只提供了省市的数据联动,下面的代码已经将区的数据补充完整,可以看出省市区的数据分别存放在不同的变量中,在用户点击不同的省份时,会重新渲染对应的市和区的数据,在用户点击不同的市时,会重新渲染对应的区的数据。

References

[1]

[2]

标签: #react select联动