Reagieren Sie Telefonnummern im Format

1. Erstellen Sie die benutzerdefinierte Logik zum Formatieren der Telefonnummer
2. Verwenden Sie die Bibliothek react-phone-number-input, um die Telefonnummer nach Land zu formatieren

In diesem Artikel lernen wir, Telefonnummern in React zu formatieren. Entwickler stehen oft vor dem Problem, den Eingabewert zu formatieren, während sie React-Anwendungen entwickeln.

Hier formatieren wir eine 10-stellige Telefonnummer im Format (###) ### - ####. Um unser Ziel zu erreichen, haben wir im ersten Beispiel die benutzerdefinierte Logik erstellt und im zweiten Beispiel die integrierte React-Bibliothek verwendet.

Erstellen Sie die benutzerdefinierte Logik zum Formatieren der Telefonnummer

Wir können benutzerdefinierte Logik erstellen, um die Telefonnummern gemäß unseren Anforderungen zu formatieren. Benutzer können die folgenden Schritte ausführen, um die Telefonnummern zu formatieren.

Im folgenden Beispielcode haben wir die <input> erstellt, um die Eingabe der Telefonnummer zu übernehmen. Immer wenn sich der Wert des Eingangs ändert, wird die Funktion handlephoneNumber() aufgerufen.

Die Funktion handlephoneNumber() ruft die Funktion formatPhoneNumber() auf, um die Telefonnummer gemäß den obigen Schritten zu formatieren. Nach dem Formatieren der Telefonnummer setzt die Funktion handlephoneNumber() den formatierten Wert der Telefonnummer in die Eingabe.

Beispielcode:

// import react and usestate
import React, { useState } from "react";

function formatPhoneNumber(input) {
  //  if the input is null, return a null value
  if (!input) return input;
  // remove all characters from the input except number input.
  const numberInput = input.replace(/[^\d]/g, "");
  //  take the length of the value of the input
  const numberInputLength = numberInput.length;
  // if the number length is 1, 2, or 3, then return it as it is.
  if (numberInputLength < 4) {
    return numberInput;
  } else if (numberInputLength < 7) {
    // if the number input length is 4, 5, or 6, format it accordingly.
    return `(${numberInput.slice(0, 3)}) ${numberInput.slice(3)}`;
  } else {
    //  if the number input length is 7, 8, 9, 10, or more, format it like the below.
    return `(${numberInput.slice(0, 3)}) ${numberInput.slice(
      3,
      6
    )}-${numberInput.slice(6, 10)}`;
  }
  // return empty string in case any condition doesn't satisfy.
  return "";
}

export default function App() {
  // Binded phoneNumber with an input value and setPhoneNUmber is used to make changes to the value of phoneNumber
  const [phoneNumber, setphoneNumber] = useState("");
  //  whenever input will change, handlephoneNumber() function will invoke.
  const handlephoneNumber = (e) => {
    // format phone number
    const formattedPhoneNumber = formatPhoneNumber(e.target.value);
    //  set the formatted phone number to the input value
    setphoneNumber(formattedPhoneNumber);
  };

  return (
    <div style={{ textAlign: "center", marginTop: "30px" }}>
      {/* number input to take phone numbetr */}
      <input onChange={(e) => handlephoneNumber(e)} value={phoneNumber} />
    </div>
  );
}

Ausgang:

In der obigen Ausgabe können Benutzer formatierte Telefonnummern entsprechend der Länge des Eingabewerts sehen. Außerdem ist es Benutzern nicht gestattet, außer Zahlen andere Zeichen zur Eingabe hinzuzufügen.

Außerdem können Benutzer keine Nummer mit einer Länge von mehr als 10 eingeben.

Verwenden Sie die Bibliothek react-phone-number-input, um die Telefonnummer nach Land zu formatieren

Die react-phone-number-input-Bibliothek von React ermöglicht es uns, die Telefonnummer nach verschiedenen Ländern zu formatieren. Wir können die Bibliothek in unseren Code importieren und die Komponente <phoneInput> verwenden, um die Telefonnummerneingabe zu übernehmen, wodurch die Telefonnummer automatisch formatiert wird.

Bevor wir uns das Beispiel ansehen, müssen Benutzer die Bibliothek in der React-App installieren. Öffnen Sie dazu das Terminal im selben Verzeichnis, in dem sich Ihre React-App befindet, und geben Sie den Befehl ein:

npm install react-phone-number-input

Jetzt müssen Benutzer die Komponente <phoneInput> in der App wie unten verwenden. Hier verfolgt die Variable phoneNumber den Wert der Eingabe, und die Funktion setPhoneNumber() setzt den Wert auf phoneNumber, wenn der Benutzer den Eingabewert ändert.

<PhoneInput value={phoneNumber}  onChange={setphoneNumber}/>

Wir haben die Formatierung von Telefonnummern mit einer einzigen Codezeile implementiert. Benutzer können den vollständigen Arbeitscode unten sehen.

Beispielcode:

//  import required libraries
import 'react-phone-number-input/style.css'
import PhoneInput from 'react-phone-number-input';
import { useState } from 'react';

function App() {
  const [phoneNumber, setphoneNumber] = useState()
  // using phoneInput component of react-phone-number-input library
  return (
    <PhoneInput
      placeholder="Add Your Phone Number Here"
      value={phoneNumber}
      onChange={setphoneNumber}/>
  )
}

export default App;

Ausgang:

In der obigen Ausgabe können Benutzer sehen, dass die Telefonnummer entsprechend dem Land formatiert wird, das sie aus der Dropdown-Liste auswählen. Außerdem wird das Land automatisch entsprechend der Länge der Telefonnummer ausgewählt.

Die zweite Methode ist beim Schreiben von Code einfacher, hindert Benutzer jedoch nicht daran, Zahlen einzugeben. Benutzer können Telefonnummern beliebiger Länge eingeben, was bei der Entwicklung der Anwendung nicht empfehlenswert ist.

Wir können die Telefonnummern gemäß unseren Anforderungen anpassen, indem wir benutzerdefinierte Logik schreiben, wie wir es in der ersten Methode geschrieben haben. Daher wird empfohlen, dass Programmierer benutzerdefinierte Logik verwenden.