react-phone-input-2如何解除位数限制支持12位以上电话号码输入

算力阿峰

2026-9-7

解决方法

react-phone-input-2的默认输入长度限制来自组件内置的各国号码规则校验，添加对应配置项关闭默认长度拦截、开启长号码支持，即可实现任意长度电话号码的正常录入。

给<PhoneInput />组件添加以下3个属性即可解除限制：

validityCheck={false}：关闭内置的号码有效性规则校验，不再按照预设的国家号码长度规则拦截用户输入
enableLongNumbers={true}：放开内置的号码长度阈值，允许输入超过常规长度的号码
autoFormat={false}：关闭自动格式化逻辑，避免格式化过程中自动截断超长的号码内容

修改后完整代码

import React, { useState } from "react";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/material.css";
export default function DropDown() {
  const [fields1, setFields1] = useState([{ value: null }]);
  function handleChange(i, event) {
    if (event) {
      let values = [...fields1];
      values[i].value = event;
      setFields1((v) => values);
    }
  }
  return (
    <div className="App">
        {fields1.map((field, idx) => (
      <PhoneInput
        country={"in"}
        key={idx}
        value={field.value || ""}
        onChange={(e) => handleChange(idx, e)}
        validityCheck={false}
        enableLongNumbers={true}
        autoFormat={false}
      />
      ))}
    </div>
  );
}