如何限制 npm react-phone-number-input 包中的国家/地区列表答案

【问题标题】：How to limited the countries list in npm react-phone-number-input package如何限制 npm react-phone-number-input 包中的国家/地区列表
【发布时间】：2020-08-11 22:43:59
【问题描述】：

当 react-phone-number-input 使用这个 npm 包时，如果用户输入不在列表中的其他国家/地区，我希望允许有限的国家/地区显示在下拉列表中，它会显示错误不允许这个国家/地区没有我限制国家/地区的道具

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

如果您查看文档here，您会发现可以向组件添加countries 属性，并为其提供字符串数组。他们的例子展示了这个数组：

["RU", "UA", "KZ"]

这会将国家/地区列表限制为这 3 个。

【讨论】：

是的，我已经尝试过了，我想限制它只接受这些，如果它不在下拉列表中，它将显示无效电话号码的错误

【解决方案2】：

构建一个自定义的国家数组，然后使用 libphonenumber-js 库中的 parseNumber 函数，从用户输入的数字中获取国家代码并与您的国家列表进行比较

【讨论】：

【解决方案3】：

要实现这一点，首先要创建要在下拉列表中显示的国家/地区列表。然后根据需要在 Blur 上运行验证。

const whitelisted_conutries = ['WS',  'SB',  'TK',  'TO',  'TV',  'VU',  'WF',  'HK']:

然后像这样将它传递给PhoneInput的国家属性，

import { isValidPhoneNumber } from 'react-phone-number-input';

      <PhoneInput
       defaultCountry="GB"
       flagUrl={'https://flag.pk/flags/4x3/{xx}.svg'}
       countries={whitelist}
       value={phone}
       onChange={(phone) => setState({ phone })}
       onBlur={() =>
       setState({
              hasEnterPhone: true,
              error: {
                ...error,
                phone: !phone
                  ? ''
                  : !isValidPhoneNo(phone) &&
                    'Please enter a valid mobile phone number.',
              },
            })
          }
        />

有关支持的道具的更多信息，请参阅在线程中标记为@jamie 的开发者文档：Docs

【讨论】：