如何在material-ui-phone-number中获取选中的国家代码？

1. 核心问题修正 #

你之前的onChange只接收了value一个参数，但material-ui-phone-number的onChange实际上支持两个参数：格式化后的手机号和当前选中的国家代码（带+号格式），这就是你报错的原因。

2. 修改代码获取国家代码 #

先在组件里加状态存储当前选中的国家代码（类组件用this.state即可），再修改MuiPhoneNumber的onChange回调，同时实现验证逻辑：

import { useState } from 'react';
import MuiPhoneNumber from 'material-ui-phone-number';

const YourComponent = (props) => {
  // 存储当前选中的国家代码，默认和defaultCountry对应
  const [selectedCountryCode, setSelectedCountryCode] = useState('+44');

  // 手机号验证与调整逻辑
  const validateAndAdjustPhone = (phoneValue, countryCode) => {
    // 提取纯数字部分，去掉所有非数字字符
    const numericFullNumber = phoneValue.replace(/\D/g, '');
    // 提取国家代码的纯数字部分（比如'+44'转成'44'）
    const countryCodeNumeric = countryCode.replace(/\D/g, '');
    // 去掉国家代码后，得到用户输入的号码主体
    const numberBody = numericFullNumber.slice(countryCodeNumeric.length);

    // 检查号码主体是否以0开头
    const hasLeadingZero = numberBody.startsWith('0');

    // 根据国家代码确定允许的号码主体长度
    let maxBodyLength;
    switch(countryCode) {
      case '+44': // 英国
        // 英国手机号正确格式是+44 7xxxxxxxxx，主体为10位（不带0）；若用户加了0，允许主体长度为11位，自动修正后为10位
        maxBodyLength = hasLeadingZero ? 11 : 10;
        // 自动修正：英国号码无需在国家代码后加0，直接去掉开头的0
        if (hasLeadingZero) {
          const correctedPhone = `${countryCode}${numberBody.slice(1)}`;
          props.setPhone(correctedPhone);
          return;
        }
        break;
      case '+86': // 中国
        // 中国手机号主体固定11位，无需处理开头0
        maxBodyLength = 11;
        break;
      case '+1': // 美加地区
        // 美加手机号主体固定10位
        maxBodyLength = 10;
        break;
      // 可自行扩展其他国家规则
      default:
        maxBodyLength = 10;
    }

    // 验证长度是否合规，超出则截断或提示
    if (numberBody.length > maxBodyLength) {
      console.error(`号码长度超过限制，最多允许${maxBodyLength}位`);
      const truncatedPhone = `${countryCode}${numberBody.slice(0, maxBodyLength)}`;
      props.setPhone(truncatedPhone);
    } else {
      props.setPhone(phoneValue);
    }
  };

  return (
    <MuiPhoneNumber
      id="phone"
      name="phone"
      value={props.phone}
      defaultCountry={'gb'}
      // 修改onChange，接收两个参数
      onChange={(value, countryCode) => {
        setSelectedCountryCode(countryCode);
        validateAndAdjustPhone(value, countryCode);
      }}
      variant='outlined'
      label='Your Phone number'
      required
      countryCodeEditable={false}
      enableLongNumbers
      disableAreaCodes
    />
  );
};

3. 关键说明 #

• onChange的第二个参数countryCode是带+号的标准格式（如+44、+86），直接用这个值判断国家规则即可。
• 长度规则和开头0的处理逻辑可以根据各国实际手机号规范调整，不想自动修正的话，也可以改成提示用户修改。
• 原onKeyPress可以移除，因为onChange已经覆盖了值变化的所有场景，验证更全面。

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