如何在React-phone-input-2中编程式选择国家及对应拨号区号

数据老陈

2026-10-5

实现方案

你当前已经给PhoneInput组件的country属性绑定了表单的country字段值，只需要将新增的独立国家下拉框和该字段做双向绑定，就能实现自动同步，具体操作如下：

核心逻辑

React-Phone-Input-2的country是受控属性，只要传入的国家编码值发生变化，组件会自动切换对应国旗、更新拨号前缀，不需要额外调用内部方法。

具体实现步骤

绑定共用状态源：让独立国家下拉框选中值和form.$("country").value绑定，下拉框切换时直接修改该字段值，PhoneInput会自动触发国家切换。
同步拨号区号到手机号字段：在下拉框的onChange事件中，根据选中的国家编码获取对应区号，更新表单的手机号字段即可，示例代码如下：

// 独立国家下拉框的选中回调
const handleCountryChange = (selectedIsoCode) => {
  // 更新共用的国家字段，触发PhoneInput自动切换
  form.$("country").set(selectedIsoCode);

  // 获取对应国家的区号，两种实现方案二选一：
  // 方案1：用组件内置工具方法获取
  import { getCountryCallingCode } from 'react-phone-input-2/utils';
  const callingCode = getCountryCallingCode(selectedIsoCode);

  // 方案2：自己维护常用国家的映射表，不需要额外引入依赖
  // const countryCallingCodeMap = {
  //   CN: '86',
  //   US: '1',
  //   JP: '81',
  //   // 其他需要的国家自行补充
  // }
  // const callingCode = countryCallingCodeMap[selectedIsoCode];

  // 更新手机号字段的区号，可按需保留用户之前输入的纯号码部分
  const oldNumber = form.$("phone").value.number || '';
  form.$("phone").set({
    ...form.$("phone").value,
    countryCode: `+${callingCode}`,
    full: `+${callingCode}${oldNumber}`
  })
}