Здравствуйте, я новичок в ReactJS, и мне нужно реализовать react-intl-tel-input для получения номера телефона со всего мира, но во время интеграции я столкнулся с некоторыми проблемами. Когда я пишу этот код:

 <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 = confirmationResu<

            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;
 

Проблемы

• Нет определенного начального состояния, поэтому доступ this.state.phoneNumber выдает ошибку.
• IntlTelInput Компонент принимает onPhoneNumberChange обработчик, который принимает статус проверки, текущее значение и сведения о стране в качестве аргументов вместо onChange обработчика, принимающего onChange объект события.

Решение

Укажите допустимое начальное состояние для компонента. В компонентах класса React state это просто свойство класса, его просто нужно определить.

 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}
/>