Formik 数字字段仅接受正数

Question

我有一个表格，其中有一个数字字段。我为此使用了formik。我需要一个只接受正数的输入。

这是codesandbox url

Answer 1

您应该在数字输入的 onChange 事件中使用正则表达式示例代码：

const App = () => (
  <div className="app">
    <Formik
      initialValues={{ email: "", rank: -2 }}
      onSubmit={async values => {
        await new Promise(resolve => setTimeout(resolve, 500));
        alert(JSON.stringify(values, null, 2));
      }}
      validationSchema={Yup.object().shape({
        email: Yup.string()
          .email()
          .required("Required")
      })}
    >
      {props => {
        const {
          values,
          touched,
          errors,
          dirty,
          isSubmitting,
          handleChange,
          handleBlur,
          handleSubmit,
          handleReset,
          setFieldValue
        } = props;
        return (
          <form onSubmit={handleSubmit}>
            <label htmlFor="email" style={{ display: "block" }}>
              Email
            </label>
            <input
              id="email"
              placeholder="Enter your email"
              type="text"
              value={values.email}
              onChange={handleChange}
              onBlur={handleBlur}
              className={
                errors.email && touched.email
                  ? "text-input error"
                  : "text-input"
              }
            />
            <label htmlFor="email" style={{ display: "block" }}>
              Rank
            </label>
            <input
              id="rank"
              placeholder="Enter your email"
              type="number"
              value={values.rank}
              onChange={e => {
                e.preventDefault();
                const { value } = e.target;
                const regex = /^(0*[1-9][0-9]*(\.[0-9]*)?|0*\.[0-9]*[1-9][0-9]*)$/;
                if (regex.test(value.toString())) {
                  setFieldValue("rank", value);
                }
              }}
              onBlur={handleBlur}
            />
            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </form>
        );
      }}
    </Formik>
  </div>
);

render(<App />, document.getElementById("root"));

代码沙盒链接：https://codesandbox.io/embed/formik-example-nut8p ?fontsize=14&hidenavigation=1&theme=dark