React 形式の電話番号
この記事では、React で電話番号をフォーマットする方法を学びます。 開発者は、React アプリケーションの開発中に入力値のフォーマットの問題に直面することがよくあります。
ここでは、(###) ### - #### 形式で 10 桁の電話番号をフォーマットします。 目標を達成するために、最初の例ではカスタム ロジックを作成し、2 番目の例では React 組み込みライブラリを使用しました。
電話番号をフォーマットするカスタム ロジックを作成する
要件に応じて電話番号をフォーマットするカスタム ロジックを作成できます。 ユーザーは、次の手順に従って電話番号をフォーマットできます。
-
入力が空の場合、空の文字列または値を返します。
if (!input) return input; -
入力から数字をフィルタリングし、他の文字を削除します。
const numberInput = input.replace(/[^\d]/g, ""); -
電話番号の入力値の長さを取得します。
const numberInputLength = numberInput.length; -
入力長が 4 未満の場合は、電話番号をそのまま返します。
if (numberInputLength < 4) { return numberInput; } -
入力値の長さが 4 ～ 7 の場合は、
(###) #__のようにフォーマットします。if (numberInputLength < 7) { return `(${numberInput.slice(0, 3)}) ${numberInput.slice(3)}`; } -
入力値の長さが 10 を超える場合は、
(###) ### - #___のようにフォーマットします。if{ return `(${numberInput.slice(0, 3)}) ${numberInput.slice(3,6)}-${numberInput.slice(6, 10)}`; }
以下のコード例では、電話番号入力を取得するために <input> を作成しました。 入力の値が変化するたびに、handlephoneNumber() 関数が呼び出されます。
handlephoneNumber() 関数は formatPhoneNumber() 関数を呼び出して、上記の手順に従って電話番号をフォーマットします。 電話番号をフォーマットした後、handlephoneNumber() 関数は電話番号のフォーマットされた値を入力に設定します。
コード例:
// 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>
);
}
出力：
上記の出力では、ユーザーは入力値の長さに応じてフォーマットされた電話番号を確認できます。 また、ユーザーが数字以外の文字を入力に追加することを許可していません。
さらに、ユーザーは 10 を超える長さの数字を入力できません。
react-phone-number-input ライブラリを使用して、国に応じて電話番号をフォーマットする
React の react-phone-number-input ライブラリを使用すると、さまざまな国に応じて電話番号をフォーマットできます。 ライブラリをコードにインポートし、<phoneInput> コンポーネントを使用して電話番号入力を取得すると、電話番号が自動的にフォーマットされます。
例を見る前に、ユーザーはライブラリを React アプリにインストールする必要があります。 そのためには、React アプリと同じディレクトリでターミナルを開き、次のコマンドを入力します。
npm install react-phone-number-input
ここで、ユーザーは以下のようにアプリで <phoneInput> コンポーネントを使用する必要があります。 ここで、phoneNumber 変数は入力値を追跡し、ユーザーが入力値を変更すると、setPhoneNumber() 関数が値を phoneNumber に設定します。
<PhoneInput value={phoneNumber} onChange={setphoneNumber}/>
1 行のコードで電話番号のフォーマットを実装しました。 ユーザーは、以下の完全な作業コードを見ることができます。
コード例:
// 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;
出力：
上記の出力では、ドロップダウンから選択した国に従って電話番号がフォーマットされていることがわかります。 また、電話番号の長さに応じて国を自動選択します。
2 番目の方法はコードの記述が簡単ですが、ユーザーが数字を入力するのを妨げません。 ユーザーは任意の長さの電話番号を入力できますが、これはアプリケーションの開発中はお勧めできません。
最初の方法で記述したように、カスタム ロジックを記述して、要件に従って電話番号をカスタマイズできます。 そのため、プログラマはカスタム ロジックを使用することをお勧めします。
