React表单中PhoneInput无法输入，handleChange函数失效求助

问题核心：你用的PhoneInput组件和原生表单组件的onChange回调参数格式不一样——原生组件返回的是包含target的事件对象，但PhoneInput直接返回电话号码字符串（部分库还会额外返回国家信息），导致你原有的handleChange函数无法正确解析参数，自然没法更新data.Phone的状态，所以输入没反应。

解决方法 #

方法一：单独为PhoneInput写处理函数 #

这是最清晰的方式，避免和原生表单的处理逻辑混淆：

1. 新增处理手机号的函数：

const handlePhoneChange = (phone) => {
  setData(prevState => ({
    ...prevState,
    Phone: phone
  }));
}

2. 修改PhoneInput组件的onChange属性：

<PhoneInput
  placeholder="Enter phone number"
  value={data.Phone}
  name="Phone"
  onChange={handlePhoneChange}
/>

方法二：修改原有handleChange兼容两种情况 #

如果想复用同一个函数，可以判断参数类型来区分处理：

const handleChange = (input) => {
  // 原生表单组件触发的事件，参数是event对象
  if (input.target) {
    const { name, value } = input.target;
    setData(prevState => ({
      ...prevState,
      [name]: value
    }));
  } else {
    // PhoneInput触发的，参数是电话号码字符串
    setData(prevState => ({
      ...prevState,
      Phone: input
    }));
  }
}

注意事项 #

如果你使用的是react-phone-input-2这类库，它的onChange会返回两个参数：(phone, country)，如果需要保存国家区号，可以调整处理函数：

const handlePhoneChange = (phone, country) => {
  setData(prevState => ({
    ...prevState,
    Phone: phone,
    // 可选：保存国家区号
    CountryCode: country.dialCode
  }));
}

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