如何在react-phone-number-input中重写getCountries过滤国家列表并保留样式？

完全可以通过重写getCountries函数来过滤国家列表，同时保留手机号输入框的原有外观，不用拆分出单独的CountrySelect组件。

核心实现步骤 #

1. 先引入默认的getCountries，然后自定义过滤逻辑：

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

// 定义你需要保留的国家代码（两位ISO代码）
const allowedCountries = ['CN', 'US', 'GB', 'JP'];

// 生成过滤后的国家列表函数
const filteredCountries = () => getCountries().filter(country => allowedCountries.includes(country));

2. 直接在PhoneInput组件中使用这个自定义函数，输入框的原有样式（包括国旗、内置国家选择器）都会保留，只是选择列表被过滤了：

<PhoneInput
  placeholder="Phone #"
  value={phone}
  country={country}
  onChange={keyChangeHandler}
  getCountries={filteredCountries}
/>

关于你之前遇到的问题 #

• 单独使用CountrySelect时没显示国旗：默认的CountrySelect需要手动配置国旗渲染，而PhoneInput自带的选择器已经内置了国旗样式，直接用上面的方法就能避免这个问题。
• 输入框仍保留国家选择功能：如果你坚持用单独的CountrySelect，需要给PhoneInput加上disableCountrySelect属性来隐藏自带的选择器，同时给CountrySelect添加国旗渲染逻辑：

import { CountrySelect, Flag, en } from 'react-phone-number-input';

<CountrySelect
  labels={en}
  value={country}
  onChange={setCountry}
  getCountries={filteredCountries}
  // 自定义选项渲染，加入国旗
  renderOption={({ country, label }) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <Flag country={country} />
      <span>{label}</span>
    </div>
  )}
/>

<PhoneInput
  placeholder="Phone #"
  value={phone}
  country={country}
  onChange={keyChangeHandler}
  disableCountrySelect // 隐藏输入框自带的国家选择器
/>

内容的提问来源于stack exchange，提问作者Gabriela