Поле номера Formik принимает только положительные числа

Question

У меня есть форма, в которой у меня есть числовое поле. Я использую Formik для этого. Мне нужно иметь вход, который принимает только положительные числа.

Это коды и поля 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

Answer 2

Вы можете добавить атрибут min к вашему входу

<input
   id="rank"
   placeholder="Enter your rank"
   type="number"
   value={values.rank}
   min="1"
   onChange={handleChange}
   onBlur={handleBlur}
/>

Answer 3

Передать функцию проверки

// Synchronous validation
const validate = values => {
  const errors = {};

  if (!values.numberFied < 0) {
    errors.numberFied = 'Must be positive';
  }

  //...

  return errors;
};