在 web 开发中，选择和输入城市信息是一个常见的需求。而 tqb-component-city-picker 是一个适用于 React 的城市选择器组件，它可以方便地将城市信息转换为省市区三级联动选择器。
本文将详细介绍 tqb-component-city-picker 的使用方法及其 API。
安装
为了使用 tqb-component-city-picker，首先需要在项目目录下安装它。打开终端或命令行，输入以下命令：
npm install tqb-component-city-picker
使用
安装好之后，在你的项目中引入它。比如，你可以在一个 React 组件中引入并使用它：
-- -------------------- ---- -------
------ ------ - --------- ----------- - ---- --------
------ ---------- ---- ----------------------------
------ ------- -------- ------------- -
----- ------- --------- - -----------
----- ------------ - ----------------- -- -
-- ----- ---- - --------- ------ ----- ------ --------- ----- -
--------------
-- ----
------ -
-----------
-------------
-----------------------
-------------------
--
--
-value
value 属性表示选择器当前选中的值。它的格式为 { province: '...', city: '...', district: '...' }，其中 province、city 和 district 是字符串，分别表示省份、城市和区/县。如果没有选择任何值，它的值为 null。
onChange
每次选中值变化时，CityPicker 都会调用 onChange 函数。这个函数的参数是一个城市信息对象，格式与 value 属性相同。
placeholder
如果当前没有选择任何值，展示在选择器上的默认提示文字。
组件属性
除了上面的属性，CityPicker 还提供了一些可选的属性设置。
className
为选择器添加自定义的 CSS 类名。
style
为选择器添加自定义的内联样式。
showDistrict
布尔值，表示是否显示区/县的选项。默认为 true。
provinceList
一个数组，包含省份列表。默认情况下，CityPicker 会加载 tqb-component-city-picker 中内置的省份列表（包含中国所有省份）。如果你想只展示其中的一些省份，可以传递一个省份列表。列表中的每个元素应该具有以下格式：
{
label: '省份名',
value: '省份名'
}cityList
一个对象，包含城市列表。默认情况下，CityPicker 会根据选择的省份动态加载该省份下的城市列表。如果你想在某些情况下只展示其中的一些城市，可以传递一个城市列表。列表中的每个键名应该是一个省份名，对应的值是一个城市列表，格式如下：
-- -------------------- ---- -------
-
------- -
- ------ ------- ------ ------ --
- ------ ------- ------ ------ -
--
------- -
- ------ ------- ------ ------ --
- ------ ------- ------ ------ -
-
-districtList
一个对象，包含区/县列表。默认情况下，CityPicker 会根据选择的城市动态加载该城市下的区/县列表。如果你想在某些情况下只展示其中的一些区/县，可以传递一个区/县列表。列表中的每个键名应该是一个城市名，对应的值是一个区/县列表，格式如下：
-- -------------------- ---- -------
-
------- -
- ------ -------- ------ ------- --
- ------ -------- ------ ------- -
--
------- -
- ------ -------- ------ ------- --
- ------ -------- ------ ------- -
-
-getProvinceList
一个函数，返回省份列表。默认情况下，CityPicker 会加载 tqb-component-city-picker 中内置的省份列表。如果你想自定义省份列表，并且不想使用 provinceList 属性，可以传递一个函数，在函数中返回省份列表：
function getProvinceList() {
return [
{ label: '省份名1', value: '省份名1' },
{ label: '省份名2', value: '省份名2' }
];
}getCityList
一个函数，返回城市列表。默认情况下，CityPicker 会根据选择的省份动态加载该省份下的城市列表。如果你想自定义城市列表，并且不想使用 cityList 属性，可以传递一个函数，在函数中根据省份名返回城市列表：
-- -------------------- ---- -------
-------- --------------------- -
-- --------- --- ------- -
------ -
- ------ ------- ------ ------ --
- ------ ------- ------ ------ -
--
- ---- -
------ -
- ------ ------- ------ ------ --
- ------ ------- ------ ------ -
--
-
-getDistrictList
一个函数，返回区/县列表。默认情况下，CityPicker 会根据选择的城市动态加载该城市下的区/县列表。如果你想自定义区/县列表，并且不想使用 districtList 属性，可以传递一个函数，在函数中根据城市名返回区/县列表：
-- -------------------- ---- -------
-------- --------------------- -
-- ----- --- ------- -
------ -
- ------ -------- ------ ------- --
- ------ -------- ------ ------- -
--
- ---- -
------ -
- ------ -------- ------ ------- --
- ------ -------- ------ ------- -
--
-
-总结
tqb-component-city-picker 是一个方便的 React 城市选择器组件，它提供了许多可定制化的属性和函数，可以根据自己的需求展示或隐藏某些选项或列表。本文中主要介绍了它的基本使用方法及 API，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eaa81e8991b448dc16d