Блог

У меня есть ввод, который не может содержать более 2 знаков после запятой. Также у меня есть проверка, которая не работает должным образом для чисел с большим количеством нулей.

Ожидаемое поведение

Неожиданное поведение

 export default function App() {
  const isValidAmount = (amount) => /^$|^d .?d{0,2}$/.test(String(amount));

  return (
    <div>
      <Formik initialValues={{ decimalNumber: "" }}>
        {({ handleChange }) => (
          <Field
            className="input"
            type="number"
            name="decimalNumber"
            placeholder="Decimal Number"
            component={TextField}
            InputProps={{
              onChange: (e) => {
                if (!isValidAmount(e.target.value)) return;
                handleChange(e);
              }
            }}
          />
        )}
      </Formik>
    </div>
  );
}
 

Код здесь

Не могли бы вы объяснить: что происходит?

Используйте атрибут HTML step для ограничения допустимых чисел. В этом случае вы хотите ограничить сотые доли:

 <Field
  /* ... */
  step="0.01"
/>