自動生成[react]ハイフン(-)

11552 ワード
React テキストリンク
ユーザーの立場から考えると、ハイフンが自動生成されていれば、とても便利なはずです.これはユーザのために考えることであり,常にユーザの立場に立って考えなければならない.

JSXと関数

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

const Phone = () => {
  const [num, setNum] = useState('');
  const phoneRef = useRef();

  // 휴대폰 번호 입력 함수
  const handlePhone = (e) => {
    const value = phoneRef.current.value.replace(/\D+/g, "");
    const numberLength = 11;

    let result;
    result = "";  

    for (let i = 0; i < value.length && i < numberLength; i++) {
      switch (i) {
        case 3:
          result += "-";
          break;
        case 7:
          result += "-";
          break;

        default:
          break;
      }

      result += value[i];
    }

    phoneRef.current.value = result;

    setNum(e.target.value); 
  };

  return (

      <div>
        <label htmlFor="user-num">휴대폰 번호</label>
        <input 
          name="user-num" 
          value={num} 
          ref={phoneRef}
          onChange={handlePhone}
          type="tel"
        />
      </div>
  );
};

export default Phone;

結果



活用する


上記の携帯電話番号のほか、変換関数で必要な機能を活用することもできます.
// 카드유효기간 입력 함수 
const handleCardValid = (e) => {
  const value = ref.current.value.replace(/\D+/g, "");
  const numberLength = 4;

  let result;
  result = "";  

  for (let i = 0; i < value.length && i < numberLength; i++) {
    switch (i) {
      case 2:
        result += "/";
        break;
      default:
        break;
    }

    result += value[i];
  }

  ref.current.value = result;

  setCardValid(e.target.value);
};

input type


追加のinputを使用する場合、現在のユーザはWebではなくモバイルデバイスをより多く使用しているため、UXを考慮する必要がある.
inputtypeのデフォルトはtextなので、キーボードキーボードが表示されます.
上記の携帯電話番号を入力するためだけに入力した場合、ユーザーはデジタルキーボードに変更し、携帯電話番号を入力することができます.
このような些細なことでも、ユーザーは不快感を吐露するので、事前に防ぐべきであり、UXを考える先端開発者としての役割のようだ.
したがって,input typeをnumber,telに変更し,ユーザが移動中にInputをクリックした場合にのみ,ディジタルキーボードが現れる.
詳しいInput typeは下記の記事をご覧ください.
https://blog.naver.com/PostView.naver?blogId=besthuman01&logNo=220509888830&redirect=Dlog&widgetTypeCall=true&directAccess=false
ソース:https://velog.io/@godud2604/React-%ED%95%98%EC%9D%B4%ED%94%88-%EC%9E%90%EB%8F%99-%EC%83%9D%EC%84%B1
[SQL]-SQLプログラミング
選択、バブル、挿入ソート