<input/> 소수점자리수 체크하기

<input/>태그에 숫자를 입력했을때, 0~100범위에서 소수점 둘째자리까지 입력이 가능하게 하려고 한다.

1번째 시도

import React, { useState } from "react";

export default function App() {
  const [amount, setAmount] = useState("");

  function checkNumber(number) {
      let regexp = /^\d*.?\d{0,2}$/;
      if (!regexp.test(number)) {
        alert("소수점 둘째자리까지 입력가능합니다.");
      } else {
        setAmount(number);
      }
  }
  
  return (
    <div className="App">
      <input
        type="number"
        onChange={(e) => {
          checkNumber(e.target.value);
        }}
      />
    </div>
  );
}

태그 안에 마지막 입력값이 그대로 남아있어 뒷부분을 자르고 싶다.

완성!

import React, { useState } from "react";

export default function App() {
  const [amount, setAmount] = useState("");
  
  return (
    <div className="App">
    	<input type="number" step="0.01" value={amount}
          onChange={(e) => {
          const pattern = /^(\d{0,10}([.]\d{0,2})?)?$/;
          if (pattern.test(e.target.value)) {
            setAmount(e.target.value);
          	}
        	}}
        />
    </div>
  );
}