w-country-select

react 的国家区号选择器，可验证手机号格式是否正确

react country select components

Usage

TODO

版本

v0.2.0 v0.2.2 解决自定义错误信息异常问题 自定义设置错误信息设置 undefined ，显示默认错误提示

v0.1.9 解决部分问题，增加获取手机号验证是否正确的方法,处理清除逻辑，更改验证逻辑。

Development

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} | |

LICENSE

MIT