Как легко создать формы React с помощью react-hook-form

1656074655 kak legko sozdat formy react s pomoshhyu react hook form

Никто не любит создавать и повторно создавать сложные формы с проверкой, включая разработчиков React.

Когда дело доходит до создания форм React, важно использовать библиотеку форм, которая предоставляет много удобных инструментов и не требует много кода.

Исходя из этих двух критериев, полезности и простоты, идеальной библиотекой форм React для использования в ваших приложениях является react-hook-form.

Давайте посмотрим, как использовать react-hook-form в ваших проектах для создания богатых, функциональных форм для ваших программ React.

Хотите получить полное руководство по созданию удивительных проектов с помощью React? Просмотрите React Bootcamp.

Как установить react-hook-form

Давайте рассмотрим типичный случай использования: пользователь, регистрируемый в нашей программе.

Для нашей формы регистрации мы будем иметь три ввода для любого нового пользователя имени пользователя, пароля и электронной почты:

import React from "react";

const styles = {
  container: {
    width: "80%",
    margin: "0 auto",
  },
  input: {
    width: "100%",
  },
};

export default function Signup() {
  return (
    <div style={styles.container}>
      <h4>Sign up</h4>
      <form>
        <input placeholder="Username" style={styles.input} />
        <input placeholder="Email" style={styles.input} />
        <input placeholder="Password" style={styles.input} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

После того, как мы запустим проект React, мы начнем с установки react-hook-form библиотека.

npm i react-hook-form

Как использовать хук useForm

Чтобы начать использовать react-hook-form нам просто нужно позвонить useForm крючок.

Когда мы это сделаем, мы вернем объект, из которого мы будем деструктурированы register собственность.

register является функцией, которую нам нужно подключить к каждому входу в качестве ссылки.

function App() {
  const { register } = useForm();

  return (
    <div style={styles.container}>
      <h4>Signup</h4>
      <form>
        <input ref={register} placeholder="Username" style={styles.input} />
        <input ref={register} placeholder="Email" style={styles.input} />
        <input ref={register} placeholder="Password" style={styles.input} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Функция реестра будет принимать значение, которое пользователь ввел в каждый вход, чтобы проверить его. Реестр также передаст каждое значение функции, которая будет вызываться, когда наша форма будет направлена, о чем мы рассмотрим далее.

Чтобы реестр работал надлежащим образом, для каждого входа необходимо предоставить соответствующий атрибут имени. Например, для ввода имени пользователя оно называется «имя пользователя».

Причина этого заключается в том, что, когда наша форма будет представлена, мы получим все значения входных данных для одного объекта. Каждое из свойств объекта будет названо согласно атрибутам имени входов, которые мы указали.

function App() {
  const { register } = useForm();

  return (
    <div style={styles.container}>
      <h4>My Form</h4>
      <form>
        <input
          name="username"
          ref={register}
          placeholder="Username"
          style={styles.input}
        />
        <input
          name="email"
          ref={register}
          placeholder="Email"
          style={styles.input}
        />
        <input
          name="password"
          ref={register}
          placeholder="Password"
          style={styles.input}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Как отправить форму с помощью handleSubmit

Чтобы обработать отправку нашей формы и получение входных данных, мы добавим файл onSubmit к нашему элементу формы и подключите его к локальной функции с таким же названием:

function App() {
  const { register } = useForm();

  function onSubmit() {}

  return (
    <div style={styles.container}>
      <h4>My Form</h4>
      <form onSubmit={onSubmit}>
        <input
          name="username"
          ref={register}
          placeholder="Username"
          style={styles.input}
        />
        <input
          name="email"
          ref={register}
          placeholder="Email"
          style={styles.input}
        />
        <input
          name="password"
          ref={register}
          placeholder="Password"
          style={styles.input}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

от useFormмы возьмем функцию с названием handleSubmit и поверните его на Submit как функцию высшего порядка.

The handleSubmit функция позаботится о сборе всех наших данных, введенных в каждый вход, который мы получим onSubmit как объект называется data.

Теперь, если мы console.log(data) мы можем увидеть, что мы ввели в каждый из наших введенных данных для свойства с тем же именем:

function App() {
  const { register, handleSubmit } = useForm();

  function onSubmit(data) {
    console.log(data); 
    // { username: 'test', email: 'test', password: 'test' }
  }

  return (
    <div style={styles.container}>
      <h4>Signup</h4>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          name="username"
          ref={register}
          placeholder="Username"
          style={styles.input}
        />
        <input
          name="email"
          ref={register}
          placeholder="Email"
          style={styles.input}
        />
        <input
          name="password"
          ref={register}
          placeholder="Password"
          style={styles.input}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Параметры проверки с помощью функции реестра

Проверить нашу форму и добавить ограничения для каждого значения ввода очень просто – нам просто нужно передать информацию в register функция.

register принимает объект, содержащий ряд свойств, которые укажут регистр, как проверить данный вход.

Первое свойство required. По умолчанию для него установлено значение false, но мы можем установить значение true, чтобы убедиться, что форма не посылается, если она не заполнена.

Мы хотим, чтобы значение имени пользователя было обязательным, и хотим, чтобы имена пользователей наших пользователей составляли больше шести символов, но меньше 24.

Чтобы применить эту проверку, мы можем установить ограничения minLength до шести, но maxLength должно быть 20:

<input
  name="username"
  ref={register({
    required: true,
    minLength: 6,
    maxLength: 20,
  })}
  style={styles.input}
  placeholder="Username"
/>

Если бы мы использовали числа для этого входа (скажем, если этот вход был для возраста человека), мы использовали бы свойства min и max вместо minLength и maxLength.

Далее мы можем дать шаблон регулярного выражения, если хотим.

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

<input
  name="username"
  ref={register({
    required: true,
    minLength: 6,
    maxLength: 20,
    pattern: /^[A-Za-z]+$/i,
  })}
  style={styles.input}
  placeholder="Username"
/>

И, наконец, есть validateпользовательская функция, которая дает нам доступ к значению, введенному во вход. validate позволяет нам предоставить нашу собственную логику, чтобы определить, действительна она или нет (возвращая логическое значение true или false).

Для электронной почты здесь мы также хотим, чтобы она была обязательной и действительной. Чтобы проверить это, мы можем передать вход в функцию из библиотеки validator звонил isEmail.

Если входное электронное письмо, он возвращает true. В противном случае false:

<input
  name="email"
  ref={register({
    required: true,
    validate: (input) => isEmail(input), // returns true if valid
  })}
  style={styles.input}
  placeholder="Email"
/>

Для паролей register функцию, мы установим для require значение true, minlength до шести, и мы не будем устанавливать a maxLength:

<input
  name="password"
  ref={register({
    required: true,
    minLength: 6
  })}
  style={styles.input}
  placeholder="Password"
/>

Как отразить ошибки

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

Если один из введенных данных недействителен, данные формы просто не подаются (onSubmit не называется). Кроме того, первый вход с ошибкой автоматически фокусируется, что не предоставляет нашему пользователю ни одного подробного отзыва о происходящем.

Вместо того чтобы просто не отправлять форму, мы можем получить errors объект из useForm.

И так же, как и функция данных, в которую мы попадаем onSubmit, errors содержит свойства, соответствующие каждому из имен входов, если у него есть ошибка.

Для нашего примера мы можем добавить условие к каждому входу и сказать, если есть ошибка, мы установим borderColor к красному.

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

  function onSubmit(data) {
    console.log(data);
  }

  return (
    <div style={styles.container}>
      <h4>My Form</h4>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          name="username"
          ref={register({
            required: true,
            minLength: 6,
            maxLength: 20,
            pattern: /^[A-Za-z]+$/i,
          })}
          style={{ ...styles.input, borderColor: errors.username && "red" }}
          placeholder="Username"
        />
        <input
          name="email"
          ref={register({
            required: true,
            validate: (input) => isEmail(input),
          })}
          style={{ ...styles.input, borderColor: errors.email && "red" }}
          placeholder="Email"
        />
        <input
          name="password"
          ref={register({
            required: true,
            minLength: 6,
          })}
          style={{ ...styles.input, borderColor: errors.password && "red" }}
          placeholder="Password"
        />
        <button type="submit" disabled={formState.isSubmitting}>
          Submit
        </button>
      </form>
    </div>
  );
}

Режим проверки

По умолчанию объект errors обновляется только при отправке формы. Проверка по умолчанию выполняется только после отправки формы.

Мы можем изменить это, передав useForm объект, где мы можем установить режим, когда мы хотим, чтобы была выполнена проверка: onBlur, onChangeили onSubmit.

onBlur будет выполнять проверку каждый раз, когда пользователь «размывается» или щелкает от ввода. onChange есть каждый раз, когда пользователь вводит ввод, и onSubmit есть всякий раз, когда форма подана.

Для нашей формы выберем onBlur.

const { register, handleSubmit, errors } = useForm({
  mode: "onBlur",
});

Обратите внимание, что существуют другие помощники для установки и удаления ошибок вручную (setError и clearError). Они будут использованы, если, например, у вас были определенные случаи, когда вы хотите, чтобы он создал другую ошибку или самостоятельно удалил ошибку в onSubmit.

Как отключить нашу форму с помощью formState

Последнее значение, которое мы можем получить useForm крючок есть formState.

Это дает нам важную информацию, например, когда были затронуты определенные введенные данные, а также когда форма была подана.

Итак, если вы хотите отключить кнопку формы, чтобы убедиться, что форма не посылается чаще, чем нужно, мы можем установить выключено на formState.isSubmitting.

Каждый раз, когда мы отправляем нашу форму, она будет выключена, пока не завершится проверка и не будет запущена функция onSubmit.

Вывод

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

Это ничего не стоит, что в комплекте есть масса других функций react-hook-form что я здесь не освещал. Документация должна включать любой вариант использования, который вы можете придумать.

Если вы хотите увидеть окончательную версию нашего кода, нажмите на ссылку CodeSandbox прямо здесь.

Нравится эта публикация? Присоединяйтесь к React Bootcamp

Буткемп React берёт все, что вам нужно знать об изучении React, и объединяет это в один комплексный пакет, включая видео, шпаргалки и специальные бонусы.

Получите инсайдерскую информацию, которую сотни разработчиков уже использовали, чтобы овладеть React, найти работу своей мечты и взять под контроль свое будущее:

Буткемп React
Нажмите здесь, чтобы получить уведомление, когда он откроется

Добавить комментарий

Ваш адрес email не будет опубликован.