ライブラリなしの反応における入力マスク

単純な入力マスクを作成する方法
これを行うには多くのライブラリがありますが、いつでもどんな種類のWeb開発で動作するかを知るのは良いことです.この場合、クレジットカードのエントリを作成します.

ステップ1
機能部品では、我々は輸入します

import React, { useState, useEffect, useRef } from 'react';

さて、コンポーネントを作成することができますInputMask

const InputMask = () => {

}

export default InputMask;

ステップ2
まず最初に新しい状態を作りますcard , and setCard はstate , 後で我々はconst 呼ばれるinputCard のためにuseRef フック.

import React, { useState, useEffect, useRef } from "react";

const InputMask = () => {
  const [card, setCard] = useState();
  const inputCard = useRef()
}

export default InputMask;

さて、入力プロパティを入力して、InputCard

import React, { useState, useEffect, useRef } from 'react';

const InputMask = () => {
  const [card, setCard] = useState();
  const inputCard = useRef();

  return (
    <>
      <input type="text" ref={inputCard} />
    </>
  );
};

export default InputMask;

あなたがフックを知らないならばuseRef 私は、公式反応文書を共有しますuseRef in this link

ステップ3
今、我々は入力のイベントをターゲットにすることができます、ユーザーのJavaScriptのEventListenerのような作品!そのためには、関数handleChange そして、この関数をonChange イベント

import React, { useState, useEffect, useRef } from 'react';

const InputMask = () => {
  const [card, setCard] = useState();
  const inputCard = useRef();

  const handleChange = () => {

  };

  return (
    <>
      <input type="text" ref={inputCard} onChange={handleChange} />
    </>
  );
};

export default InputMask;

ステップ4
インhandleChange 使用するregex (正規表現)最初のステップでreplace 空白の空白でないすべての式を置き換えるにはmatch クレジットカードの数字を4桁の4つのグループでグループ化するために

import React, { useState, useEffect, useRef } from 'react';

const InputMask = () => {
  const [card, setCard] = useState();
  const inputCard = useRef();

  const handleChange = () => {
    const cardValue = inputCard.current.value
      .replace(/\D/g, '')
      .match(/(\d{1,4})(\d{0,4})(\d{0,4})(\d{0,4})/);
    inputCard.current.value = !cardValue[2]
      ? cardValue[1]
      : `${cardValue[1]}-${cardValue[2]}
      ${(`${cardValue[3] ? `-${cardValue[3]}` : ''}`)}
      ${(`${cardValue[4] ? `-${cardValue[4]}` : ''}`)}`;
  };

  return (
    <>
      <input type="text" ref={inputCard} onChange={handleChange} />
    </>
  );
};

export default InputMask;

これを見てmatch , 私たちはternary operator 設定するvalue for inputCard 最初のステップでは、グループ1が常に存在するので、2番目のグループの状態をfalseに設定します.2番目のステップでは、最初のグループの1つで多くの条件を書きます.次に、2番目のグループが継続し、グループ3が存在する場合、それは- , グループ4は同じです.

ステップ5
最後に、我々はuseEffect コンポーネントのライフサイクルを管理するためのフック、useeffectの中で、handleChangeのコールバックを設定し、card state 変更、これのために、我々は使用しますsetCard 入力値を保存するにはcard state

import React, { useState, useEffect, useRef } from 'react';

const InputMask = () => {
  const [card, setCard] = useState();
  const inputCard = useRef();

  const handleChange = () => {
    const cardValue = inputCard.current.value
      .replace(/\D/g, '')
      .match(/(\d{0,4})(\d{0,4})(\d{0,4})(\d{0,4})/);
    inputCard.current.value = !cardValue[2]
      ? cardValue[1]
      : `${cardValue[1]}-${cardValue[2]}${`${
          cardValue[3] ? `-${cardValue[3]}` : ''
        }`}${`${cardValue[4] ? `-${cardValue[4]}` : ''}`}`;
    const numbers = inputCard.current.value.replace(/(\D)/g, '');
    setCard(numbers);
  };

  useEffect(() => {
    handleChange();
  }, [card]);

  return (
    <>
      <input type="text" ref={inputCard} onChange={handleChange} />
    </>
  );
};

export default InputMask;

このコードは、電話の入力で動作します!その場合には(xxx) を入力します.
Demo
閉じるこの動画はお気に入りから削除されています.