如何限制 npm react-phone-number-input 包中的國家/地區列表

Question

當 react-phone-number-input 使用這個 npm 包時，我想允許有限的國家顯示在下拉列表中，如果用戶輸入不在列表中的其他國家，它會顯示錯誤不允許這個國家沒有我限制國家的道具

Answer 1

如果您查看此處的文檔，您會發現您可以向組件添加一個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