[再構築]price入力値format機能

25038 ワード

1.1000単位カンマ


SeriesFormの価格入力値を1000単位にフォーマットする機能を実現
1000単位で、後ろから3つの数字を数えて、撮ります
onChangeのたびにinput値が取得され、条件に従って操作され、戻ります.
  • 入力値の受信とフォーマットを実現する関数
  • アレイ
  • に変換
  • 反転
  • 要素に3倍のインデックスがある場合は、","を追加します.そうでない場合は、新しい配列を作成します(4倍の2番目の要素に追加する必要がありますが、インデックスは0で始まる)
  • .
  • を元に戻すと
  • 文字列
  • に変換
    // SeriesForm.jsx
    
    export const formatPrice = input => {
      const formatedValue = input
        .split('')
        .reverse()
        .map((str, index) => (index > 0 && index % 3 === 0 ? `${str},` : str))
        .reverse()
        .join('');
      return formatedValue;
    };
  • input値に関数を適用し、
  • に配置します.
    // SeriesForm.jsx
    
      <PayInput
        width="50%"
        type="text"
        value={formatPrice(values.price)}
        name="price"
        onChange={handleChange}
        min={0}
        disabled={edit}
      />
  • の入力値を取得して状態にする場合は、文字列と先頭の0を削除してスケール(値を入れるときにフォーマット)
  • を行う.
      const handleChange = e => {
        const { name, value } = e.target;
    
        if (name === 'price') {
          const filteredValue = value.replace(/[^0-9]/g, '').replace(/(^0+)/g, '');
          setValues({ ...values, [name]: filteredValue });
          return;
        }
    
        setValues({ ...values, [name]: value });
      };

    2.ハングル形式で書式設定


    実装試行1

    const changeNumberToText = value => {
      switch (value) {
        case '1':
          return '일';
        case '2':
          return '이';
        case '3':
          return '삼';
        case '4':
          return '사';
        case '5':
          return '오';
        case '6':
          return '육';
        case '7':
          return '칠';
        case '8':
          return '팔';
        case '9':
          return '구';
        default:
          return '';
      }
    };
    
    export const formatPriceToText = input => {
      const formatedValue = input
        .split('')
        .reverse()
        .map((str, index) => {
          const formattedValue = changeNumberToText(str);
    
          if (str === '0') {
            return '';
          }
    
          switch (index % 4) {
            case 1:
              return `${formattedValue}`;
            case 2:
              return `${formattedValue}`;
            case 3:
              return `${formattedValue}`;
            case 0:
              return index === 0 ? formattedValue : `${formattedValue}`;
            default:
              return formattedValue;
          }
        })
        .reverse()
        .join('');
    
      return formatedValue;
    };

    に質問


    何千何万

    解決策

  • 千単位を超え、「万」は
  • を加えなければならない.
  • 数字の後ろから4個から千単位以下の値を割り込み、5番目から最後の数字まで万単位以上の値を割り込み、それぞれ単位(数字ごとに10、100、千の単位を加算)
  • を適用する.
  • 単位は適用する万単位以上と千単位以下の値を加算し、万単位以上の値を加算する前に「万」を加算し、
  • .
    const addNumberUnit = (str, index) => {
      const formattedValue = changeNumberToText(str);
      if (str === '0') {
        return '';
      }
      switch (index % 4) {
        case 1:
          return `${formattedValue}`;
        case 2:
          return `${formattedValue}`;
        case 3:
          return `${formattedValue}`;
        default:
          return formattedValue;
      }
    };
    
    export const formatPriceToText = value => {
      const reversedValueArr = value.split('').reverse();
    
      const thousandUnitValue = reversedValueArr
        .slice(0, 4)
        .map((str, index) => addNumberUnit(str, index))
        .reverse()
        .join('');
    
      const tenThousandUnitValue =
        value.length <= 4
          ? ''
          : reversedValueArr
              .slice(4)
              .map((str, index) => addNumberUnit(str, index))
              .reverse()
              .join('')
              .concat('만');
    
      return tenThousandUnitValue + thousandUnitValue;
    };