Input[type="number"] 处理程序无法正常工作 [Formik, RegExp]答案

【问题标题】：Input[type="number"] handler not working properly [Formik, RegExp]Input[type="number"] 处理程序无法正常工作 [Formik, RegExp]
【发布时间】：2021-11-15 16:08:07
【问题描述】：

我的输入不能超过 2 位小数。我也有验证，它不适用于有很多零的数字。

Expected behavior

Unexpected behavior

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>
  );
}

Code here

你能解释一下：发生了什么事吗？

【问题讨论】：

标签： javascript reactjs regex formik formik-material-ui

【解决方案1】：

使用HTML step attribute 限制允许的数字。在这种情况下，您希望限制为百分之一：

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

【讨论】：

我试过了。它也不起作用。感谢您的回复。