代码拉取完成，页面将自动刷新
react 的国家区号选择器，可验证手机号格式是否正确
react country select components
TODO
v0.2.0 v0.2.2 解决自定义错误信息异常问题 自定义设置错误信息设置 undefined ，显示默认错误提示
v0.1.9 解决部分问题，增加获取手机号验证是否正确的方法,处理清除逻辑，更改验证逻辑。
import React, { useState } from 'react';
import { CountrySelect } from 'w-country-select';
interface CountryType {
code: string; // 国家名称简写
label: string; // 国家名称全写
phone: string; // 国家区号
}
export default () => {
const [selectValue, setSelectValue] = useState<CountryType>();
const [phoneValue, setPhoneValue] = useState<string>();
const onCountryChange = (value: CountryType | undefined) => {
console.log(value);
setSelectValue(value);
};
const onInputChange = (value: string) => {
console.log(value);
setPhoneValue(value);
};
const isValid = (value: boolean) => {
console.log(value);
};
return (
<>
<CountrySelect
onCountryChange={onCountryChange}
onInputChange={onInputChange}
/>
</>
);
};
.abc {
:global {
.custom-select {
background-color: #fff;
}
.search-input {
background: #fff;
}
.phone-input {
width: 90px;
}
}
}
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| onCountryChange | 选中的事件 | const onCountryChange =(value: {code: string; label: string; phone: string; })=>{} | |
| showPlusSign | 号码是否显示加号 （可选） | boolean | true |
| onInputChange | 电话输入事件 | const onInputChange = (value:string) => {} | |
| isValid | 获取验证号码是否正确的方法(可选) | const isValid = (value:boolean)=>{} | |
| language | 中英文 （可选） | 'en' \ 'cn | en |
| allowClear | 允许删除 （可选） | boolean | true |
| allowSearch | 区号搜索 （可选） | boolean | true |
| warpClassName | 最外层自定义类名（可选） | string | |
| countryOptions | 自定义国家数据（可选） | {code: string; label: string; phone:string;}[] | (参考) https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js |
| errorMessage | 自定义手机号验证失败错误提示（可选） | string | |
| defaultCountry | 默认选中的城市(可选),支持 label(国家全写),code（国家简写）,不支持 phone（国家区号，部分国家区号相同） | code?: CountryType['code'];label?: CountryType['label']; | (数据参考) 同 自定义国家数据 参考 url |
| phonePlaceHolder | 自定义输入框提示 （可选） | string \ '' \ undefined | '' |
| priorityCountry | 建议城市，优先展示，按数组出现顺序排序（可选） ,仅支持 国家简写，不区分大小写 例子：['cn','us','at'] | string[] | |
| phoneNum | 电话值(可选) | string | |
| countryData | 城市值(可选) label(国家全写),code（国家简写） | {code?:string} {label?:string} |
MIT
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。