간단한 통화 입력
7771 단어 reactfinanceformsjavascript
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>
);
}
Reference
이 문제에 관하여(간단한 통화 입력), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/calvinpak/simple-currency-input-1b8i텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)