Поля ввода формы React-hook соответствуют рекомендациям по проверке

Question

Как лучше всего проверять соответствие полей ввода при работе с React-hook-form? Например, при сопоставлении email входных данных и т. Д. c.

При проверке соответствия электронной почты с помощью React-hook-form обнаружена проблема при попытке отделить сообщения об ошибках от «связанных элементов» посредством их проверки. метод. ref принимает только один аргумент, который используется для формы React-hook register, при этом необходимо использовать useRef для доступа к current.value для сопоставления значений, как показано ниже:

import React, { useRef } from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit, errors } = useForm();
  const inputEmail = useRef(null)
  const onSubmit = data => {
    console.log('onSubmit: ', JSON.stringify(data))
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="email">Email</label>
      <input
        name="email"
        type="email"
        ref={inputEmail}
      />
      {/* desired: show `email` error message */}
      <label htmlFor="email">Email confirmation</label>
      <input
        name="emailConfirmation"
        type="email"
        ref={register({
          validate: {
            emailEqual: value => (value === inputEmail.current.value) || 'Email confirmation error!',
          }
        })}
      />
      {errors.emailConfirmation && <p>{errors.emailConfirmation.message}</p>}
      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Хотя этот шаблон, по-видимому, является опцией при сопоставлении полей ввода, он не очень хорошо работает с React-hook-form!

Например, сообщение об ошибке связано только с одним регистром ввода и не имеет отдельных сообщений для каждому независимому полю или одному из полей ввода не присвоен регистр, это означает, что свойство required не установлено, и т. д. c.

Итак, я изучаю хорошая практика или шаблон, который решает:

• Хранение сообщений об ошибках, разделенных полем ввода
• Метод проверки при проверке соответствия должен иметь возможность ссылаться на значение поля-близнеца в React совместимый способ, а не через DOM (document.querySelector, et c)

Answer 1

Вам не нужно ручное указание для inputEmail. Вместо этого используйте метод getValues для извлечения текущего значения всей вашей формы.

const { register, getValues } = useForm()

Затем вы регистрируете оба ввода и вызываете getValues из своей пользовательской проверки.

  <input
    name="email"
    type="email"
    ref={register}
  />
  <input
    name="emailConfirmation"
    type="email"
    ref={register({
      validate: {
        emailEqual: value => (value === getValues().email) || 'Email confirmation error!',
      }
    })}
  />

Answer 2

Для этого вы можете использовать библиотеку Yup, что прекрасно:

Добавить validationSchema к вашему объекту конфигурации при создании экземпляра useForm и передать действительную схему Yup. Вот так:

const Schema = yup.object().shape({
  email: yup.string().required('Required field'),
  emailConfirmation: yup
    .string()
    .oneOf([yup.ref('email')], 'Emails must match')
    .required('Required field'),
});

// How to add it to your useForm
const { register } = useForm({
  validationSchema: Schema
})

Ваш компонент должен выглядеть примерно так:

function App() {
  const { register, handleSubmit, errors } = useForm({
    validationSchema: Schema
  });

  const onSubmit = data => {
    console.log('onSubmit: ', JSON.stringify(data))
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="email">Email</label>
      <input
        name="email"
        type="email"
        ref={register}
      />
      {/* desired: show `email` error message */}
      <label htmlFor="email">Email confirmation</label>
      <input
        name="emailConfirmation"
        type="email"
        ref={register}
      />
      {errors.emailConfirmation && <p>{errors.emailConfirmation.message}</p>}
      <input type="submit" />
    </form>
  );
}