React-phone-number-input输入弹窗自关及TypeError报错问题求助

问题现象 #

使用React-phone-number-input组件时，输入内容时弹窗自动关闭，同时抛出以下报错：

TypeError: Cannot read properties of undefined (reading 'name')
Uncaught TypeError: Cannot read properties of undefined (reading 'name')

问题原因 #

React-phone-number-input组件的onChange回调参数和原生input不一样：它不会传入事件对象e，而是直接返回格式化后的电话号码字符串。你原有的onChange函数试图访问e.target.name，但此时e是字符串，e.target为undefined，因此读取name时触发报错，进而导致组件状态更新异常，引发弹窗关闭。

修复方案 #

修改onChange回调，适配组件的参数格式，将输入值对应到指定的表单字段：

方案1：直接在组件内绑定字段名

修改PhoneInput的onChange属性，直接使用当前item的name更新状态：

return(
  <PhoneInput
    key={item.id}
    {...item}
    international
    withCountryCallingCode
    countryCallingCodeEditable={false}
    error={true}
    defaultCountry="BR"
    flags={flags}
    flagUrl="https://flag.pk/flags/4x3/{xx}.svg"
    value={values[item.name]}
    onChange={(value) => {
      // 使用函数式更新确保拿到最新状态
      setValues(prevState => ({ ...prevState, [item.name]: value }));
    }}
  />
);

方案2：重构全局onChange函数

如果需要复用onChange逻辑，可修改函数接收字段名和值两个参数：

// 重构onChange函数
const onChange = (fieldName, value) => {
  setValues(prevState => ({ ...prevState, [fieldName]: value }));
};

// 渲染PhoneInput时传递字段名
return(
  <PhoneInput
    key={item.id}
    {...item}
    international
    withCountryCallingCode
    countryCallingCodeEditable={false}
    error={true}
    defaultCountry="BR"
    flags={flags}
    flagUrl="https://flag.pk/flags/4x3/{xx}.svg"
    value={values[item.name]}
    onChange={(value) => onChange(item.name, value)}
  />
);

额外注意

确保你的values状态初始值包含phone字段，避免读取values[item.name]时出现undefined：

const [values, setValues] = useState({
  // 其他表单字段...
  phone: ''
});

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