React集成react-intl-tel-input触发handleChange报错问题咨询

问题根因 #

1. 类组件未初始化state，导致首次渲染读取this.state.phoneNumber时报Cannot read properties of null错误
2. react-intl-tel-input组件的onChange回调返回参数和原生input不一致，你编写的handleChange是适配原生input的逻辑，直接绑定到第三方组件上无法正常取值。

解决步骤 #

第一步：添加state初始化

在Login类组件内部最上方添加state初始值，避免首次渲染读取空值：

class Login extends React.Component {
  // 新增state初始化代码
  state = {
    phoneNumber: '',
    otp: '',
    mobile: ''
  }
  // 原有handleChange、configureCaptcha等方法保留

第二步：修改IntlTelInput组件的属性和回调

react-intl-tel-input不需要额外添加input、type="tel"这类原生属性，同时单独适配它的onChange回调，直接获取带国际区号的完整手机号，适配你原有提交逻辑：

<IntlTelInput
  containerClassName="intl-tel-input"
  inputClassName="form-control"
  name="mobile"
  placeholder="Enter Your Number"
  value={this.state.phoneNumber}
  onChange={(isValid, countryInfo, nativeEvent, fullPhoneNumber) => {
    this.setState({
      phoneNumber: nativeEvent.target.value,
      // fullPhoneNumber就是带国际区号的完整手机号，直接赋值给mobile适配原有提交逻辑
      mobile: fullPhoneNumber
    })
  }}
/>

补充说明 #

原有handleChange方法不需要修改，依然可以给OTP输入框的原生input使用。修改后即可正常获取带国际区号的手机号，也不会再出现state空值报错。

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