React函数组件中切换国家码后重置react-phone-input-2输入框的方法

问题出在你仅绑定了country与value属性，但切换国家码时未同步重置phone状态，导致输入框内容保持不变。可以通过监听国家码的变化触发输入值重置：

• 添加useEffect钩子，监听ip的变化（因为country由ip转换而来），当ip改变时调用setPhone('')清空输入框
• 确保ip是可触发组件重新渲染的状态或props（若ip来自父组件props，需保证父组件更新ip时当前组件能接收到新值）

修改后的代码如下：

import { useEffect } from 'react';

// ...你的组件其他逻辑代码

useEffect(() => {
  // 国家码切换时，重置输入框内容
  setPhone('');
}, [ip]); // 监听ip变化，触发重置操作

return (
  <PhoneInput
    country={ip.toLocaleLowerCase()}
    value={phone}
    countryCodeEditable={false}
    specialLabel=""
    enableSearch={true}
    masks={phoneFormat}
    searchPlaceholder=""
    placeholder={t("register:phone")}
    inputStyle={{
      paddingTop: 26,
      paddingRight: 14,
      paddingBottom: 26,
      paddingLeft: 58,
      width: "100%",
      zIndex: 1,
      backgroundColor: "#F3F6F9",
      border: "none",
    }}
    onChange={(e) => {
      setPhone(e);
      setErrors({ ...errors, phone: false });
    }}
  />
);

补充说明 #

如果ip是父组件传递的props，需确认父组件更新ip时会触发当前组件的重新渲染。也可以直接监听ip.toLocaleLowerCase()，但直接监听原始值ip能避免不必要的重复计算，逻辑更稳妥。

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