如何整合 react-intl-tel-input

Question

你好，我是 ReactJS 的新手，我必须实施 react-intl-tel-input 以获取来自世界各地的 phone 号码，但在集成时我遇到了一些问题。当我写这段代码时：

<IntlTelInput
  containerClassName="intl-tel-input"
  inputClassName="form-control"
  name="mobile"
  placeholder="Enter Your Number" 
  input
  type="tel"
  value={this.state.phoneNumber}
  onChange={this.handleChange}

我无法访问 this.handleChange 但是当我像这样编写我的正常代码时

<input
  type="tel"
  id="phone"
  name="mobile"
  placeholder="Enter Your Number"
  required
  onChange={this.handleChange}
/>

我能够访问 this.handleChange 并且我的代码可以正常工作，但我无法获取国家/地区代码。如果有人知道解决方案，请提供帮助。我遇到了这个错误

TypeError: Cannot read properties of null (reading 'phoneNumber')

这是我的完整代码。

---

Login.js

import React from 'react'
import firebase from './firebase'
import 'firebase/auth';
import "./App.css";
import { getDatabase, ref, child, get } from "firebase/database";
import IntlTelInput from 'react-intl-tel-input';
import 'react-intl-tel-input/dist/main.css';


class Login extends React.Component {

  handleChange = (e) => {
    console.log (e)
    const { name, value } = e.target
    this.setState({
      [name]: value
     
    })
    console.log (value)
    this.setState({ phoneNumber: value }, () => {
      console.log(this.state.phoneNumber);
    });
  }
  configureCaptcha = () =>{
    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
      'size': 'invisible',
      'callback': (response) => {

        // reCAPTCHA solved, allow signInWithPhoneNumber.

        this.onSignInSubmit();
        console.log("Recaptca varified")
      },
      //  defaultCountry: "IN"
     }
    );
  }
  onSignInSubmit = (e) => {
    e.preventDefault()
    this.configureCaptcha()
    const phoneNumber = this.state.mobile
    console.log(phoneNumber)
    const appVerifier = window.recaptchaVerifier;
    const dbRef = ref(getDatabase());
    get(child(dbRef, `Users/${phoneNumber}`)).then((snapshot) => {
      if (snapshot.exists()) {
        firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)

          .then((confirmationResult) => {

            window.confirmationResult = confirmationResult;

            alert('An OTP has been sent to your registered mobile number')
            localStorage.setItem("Phone_No", phoneNumber)
            console.log(localStorage.getItem('Phone_No'));

          }).catch((error) => {

            console.error(error);
            alert("Oops! Some error occured. Please try again.")
          });
      }
      else {
        alert('Sorry, this mobile number is not registered with us. Please use your registered mobile number.');
      }

    })
  }
  onSubmitOTP = (e) => {
    e.preventDefault()
    const code = this.state.otp
    console.log(code)
    window.confirmationResult.confirm(code).then((result) => {
      // User signed in successfully.
      const Users = result.user;
      console.log(JSON.stringify(Users))
      this.props.history.push("/home");
    }).catch((error) => {
      alert("You have entered wrong code")
    });
  }

  render() {
    return (
      <div className="Main-header">
        <img src="./55k-logo.png" alt="Company Logo" style={{ height: "80px", width: "200px" }} />
        <br />
        <div>
          <h2>Login Form</h2>
          <p>Limtless Water. From Unlimited Air.</p>
          <form onSubmit={this.onSignInSubmit}>
            <div id="sign-in-button"></div>
            {/* <PhoneInput */}

            <label>Mobile Number</label> <br />
            {/* for="phoneNumber"  */}
            <IntlTelInput
              containerClassName="intl-tel-input"
  inputClassName="form-control"
     name="mobile" placeholder="Enter Your Number" 
    input type="tel" value={this.state.phoneNumber}
       onChange={this.handleChange}
    
      />
            {/* <input type="tel" id="phone" name="mobile" placeholder="Enter Your Number" required onChange={this.handleChange} /> */}
            <div className="buttons">
              <button type="submit">Submit</button>
            </div>
          </form>
        </div>

        <div>
          <form onSubmit={this.onSubmitOTP}>
            <label >Code</label> <br />
            {/* for="code" */}

            <input type="number" name="otp" placeholder="Enter The 6 Digit OTP" required onChange={this.handleChange} />
            <div className="buttons" >
              <button type="submit">Submit</button>
            </div>
          </form>
        </div>
      </div>
    )
  }
}
export default Login;

Answer 1

问题

• 没有定义 初始 状态，所以这就是访问 this.state.phoneNumber 引发错误的原因。
• IntlTelInput 组件采用 onPhoneNumberChange 处理程序，该处理程序将验证状态、当前值和国家/地区详细信息作为参数，而不是 onChange 处理程序采用 onChange事件对象。

解决方案

为组件提供有效的初始状态。在 React class 组件中 state 只是一个 class 属性，它只需要被定义。

state = {};

专门为 IntlTelInput 组件创建一个新的更改处理程序。

handlePhoneChange = (status, phoneNumber, country) => {
  this.setState({ phoneNumber });
};

从 onChange 切换到 onPhoneNumberChange 事件处理程序。

<IntlTelInput
  containerClassName="intl-tel-input"
  inputClassName="form-control"
  name="mobile"
  placeholder="Enter Your Number"
  input
  type="tel"
  value={this.state.phoneNumber}
  onPhoneNumberChange={this.handlePhoneChange}
/>