如何集成 react-intl-tel-input

Question

您好，我是 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')

這是我的完整代碼。

---

登錄.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

問題

• 沒有定義的初始state 所以這就是為什么訪問this.state.phoneNumber會引發錯誤。
• IntlTelInput組件采用onPhoneNumberChange處理程序，該處理程序采用 arguments 形式的驗證狀態、當前值和國家/地區詳細信息，而不是采用onChange事件 object 的onChange處理程序。

解決方案

為組件提供有效的初始 state。 在 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}
/>