간단한 통화 입력

통화 입력은 특히 입력 상자 내부에 적절한 서식을 지정하려는 경우 처음부터 작성하기 어려울 수 있습니다.
toLocaleString()replace(/[^\d.]/gi, '' 를 사용하여 handleChange 의 문자열을 정리하는 바닐라 방식으로 할 수 있지만 react-currency-input-field package 을 사용하면 매우 쉽습니다.

CodeSandbox에서 확인하거나 아래 소스를 보십시오.



import React, { useState } from "react";
import CurrencyInput from "react-currency-input-field";
// https://www.npmjs.com/package/react-currency-input-field/v/3.0.0-beta.7#v300-release-notes
import "./styles.css";

export default function App() {
  const prefix = "$ ";
  const [value, setValue] = useState(0);

  const handleChange = (e) => {
    e.preventDefault();
    const { value = "" } = e.target;
    const parsedValue = value.replace(/[^\d.]/gi, "");
    setValue(parsedValue);
  };

  const handleOnBlur = () => setValue(Number(value).toFixed(2));

  return (
    <div className="App">
      <h1>Super Simple Currency Input</h1>
      <p>
        Using{" "}
        <a
          href="https://www.npmjs.com/package/react-currency-input-field/v/3.0.0-beta.7#v300-release-notes"
          target="_blank"
          rel="noreferrer"
        >
          react-currency-input-field
        </a>
      </p>
      <CurrencyInput
        prefix={prefix}
        name="currencyInput"
        id="currencyInput"
        data-number-to-fixed="2"
        data-number-stepfactor="100"
        value={value}
        placeholder=""
        onChange={handleChange}
        onBlur={handleOnBlur}
        allowDecimals
        decimalsLimit="2"
        disableAbbreviations
      />
    </div>
  );
}

좋은 웹페이지 즐겨찾기