react-city-select

描述

城市选择器

安装

npm i --save @kne/react-city-select

概述

城市选择器

• 内置了城市数据
• 可以通过preset自定义城市数据
• 支持城市简称拼音拼音简称搜索

示例

示例代码

• 城市单选
• 展示城市单选的情况
• citySelect(@kne/react-city-select),button(antd/lib/button)

const {createCitySelect} = citySelect;
const {default: Button} = button;
const {useState} = React;

const BaseExample = () => {
    const [value, setValue] = useState([]);
    return <div>
        <div>
            {JSON.stringify(value, null, 2)}
        </div>
        <div>
            <Button type="primary" onClick={() => {
                createCitySelect({
                    defaultValue: value,
                    onChange: (value) => {
                        setValue(value);
                    }
                });
            }}>点击选择城市</Button>
        </div>

    </div>;
};

render(<BaseExample/>);

• 城市多选
• 展示城市多选的情况
• citySelect(@kne/react-city-select),button(antd/lib/button)

const {createCitySelect} = citySelect;
const {default: Button} = button;
const {useState} = React;

const BaseExample = () => {
    const [value, setValue] = useState([]);
    return <div>
        <div>
            {JSON.stringify(value, null, 2)}
        </div>
        <div>
            <Button type="primary" onClick={() => {
                createCitySelect({
                    defaultValue: value,
                    size: 5,
                    onChange: (value) => {
                        setValue(value);
                    }
                });
            }}>点击选择城市</Button>
        </div>

    </div>;
};

render(<BaseExample/>);

• 城市名称显示
• 展示选择一个城市并显示出其城市名称
• citySelect(@kne/react-city-select),button(antd/lib/button)

const {createCitySelect, DisplayCity} = citySelect;
const {default: Button} = button;
const {useState} = React;

const BaseExample = () => {
    const [value, setValue] = useState([]);
    return <div>
        <div>
            {value.map((id)=><DisplayCity id={id} key={id}>{({city,parent})=>{
                return ((city) => {
                    if (!city) {
                        return '';
                    }
                    return parent ? parent.name + '·' + city.name : city.name;
                })(city);
            }}</DisplayCity>)}
        </div>
        <div>
            <Button type="primary" onClick={() => {
                createCitySelect({
                    defaultValue: value,
                    onChange: (value) => {
                        setValue(value);
                    }
                });
            }}>点击选择城市</Button>
        </div>

    </div>;
};

render(<BaseExample/>);

• 国籍
• 展示国家
• citySelect(@kne/react-city-select),button(antd/lib/button)

const {createNationalitySelect} = citySelect;
const {default: Button} = button;
const {useState} = React;

const BaseExample = () => {
    const [value, setValue] = useState([]);
    return <div>
        <div>
            {JSON.stringify(value, null, 2)}
        </div>
        <div>
            <Button type="primary" onClick={() => {
                createNationalitySelect({
                    title:"选择国籍",
                    defaultValue: value,
                    onChange: (value) => {
                        setValue(value);
                    }
                });
            }}>选择国籍</Button>
        </div>

    </div>;
};

render(<BaseExample/>);

API

| 属性名 | 说明 | 类型 | 默认值 | |--------------|---------------------------|--------|-------| | title | 城市选择弹框标题 | string | 请选择城市 | | size | 最大可选数量，注意如果为1的情况交互和其他有些不同 | number | 1 | | defaultValue | 初始值 | array | [] | | onChange | 城市选择完成回调函数|function| - | | showChinaQuan |是否显示国内城市的全加省市|boolean|false| | showForeignQuan |是否显示国外大洲的全加洲|boolean|false|

createCitySelect

可以使用调用函数的方式弹出一个城市选择框，方法的参数会传递给CitySelect组件

DisplayCity

用于传入城市id显示城市名

| 属性名 | 说明 | 类型 | 默认值 | |--------------|---------------------------|--------|-----| |id|城市id|string| - |

preset

| 属性名 | 说明 | 类型 | 默认值 | |--------------|-----------------------|--------|-----| |options| 需要覆盖的参数,具体参数参考下面api部分 |object|-|

api

| 属性名 | 说明 | 类型 | 默认值 | |-------------------------|-----------------------|--------|-----| | loadData | 获取城市数据，默认采用内置数据|function|-| | getChinaCities |获取中国的城市列表|function|-| | getCountries |获取所有国家列表|funciton|-| | getList |获取省份列表|function|-| | getCity(id) |传入城市ID返回城市数据|function|-| | getCityByName(name) |传入城市名返回城市数据|function|-| | searchCities(searchStr) |通过关键字搜索城市，支持拼音首字母缩写|function|-|

NationalitySelect

国籍，参数同createCitySelect