如何限制npm react-phone-number-input包中的国家列表

Question

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

Answer 1

如果你看一下文档here，你会发现你可以给组件添加一个countries属性，并为它提供一个字符串数组。他们的示例显示了这个数组：

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

这将限制国家列表仅限于这3个国家。

Answer 2

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

Answer 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