React

🔥 Как ускорить работу с формами в React

Я часто использую библиотеку react-hook-form, и одна из самых частых задач — это создание динамических списков полей (например, список контактов пользователя).
Раньше я писал кучу ручного кода для добавления/удаления элементов, пока не открыл для себя хук useFieldArray.

Пример использования:

import { useForm, useFieldArray } from "react-hook-form";

function ContactForm() {
  const { control, register, handleSubmit } = useForm({
    defaultValues: {
      contacts: [{ value: "" }]
    }
  });
  const { fields, append, remove } = useFieldArray({
    control,
    name: "contacts"
  });

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input {...register(`contacts.${index}.value`)} />
          <button type="button" onClick={() => remove(index)}>Удалить</button>
        </div>
      ))}
      <button type="button" onClick={() => append({ value: "" })}>Добавить контакт</button>
      <button type="submit">Отправить</button>
    </form>
  );
}

Этот код автоматически управляет всеми id полей и обновляет форму без лишней боли!
Если раньше вы управляли массивами вручную — попробуйте useFieldArray, вы удивитесь, насколько это проще.

❓ Пользуетесь ли вы react-hook-form или предпочитаете что-то другое для работы с формами?

✍️ @React_lib

👍5❤2

www.tgoop.com/React_lib/672

1.15K viewsApr 26 at 04:11

🔥 Как ускорить работу с формами в React

Я часто использую библиотеку react-hook-form, и одна из самых частых задач — это создание динамических списков полей (например, список контактов пользователя).
Раньше я писал кучу ручного кода для добавления/удаления элементов, пока не открыл для себя хук useFieldArray.

Пример использования:

import { useForm, useFieldArray } from "react-hook-form";

function ContactForm() {
  const { control, register, handleSubmit } = useForm({
    defaultValues: {
      contacts: [{ value: "" }]
    }
  });
  const { fields, append, remove } = useFieldArray({
    control,
    name: "contacts"
  });

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input {...register(`contacts.${index}.value`)} />
          <button type="button" onClick={() => remove(index)}>Удалить</button>
        </div>
      ))}
      <button type="button" onClick={() => append({ value: "" })}>Добавить контакт</button>
      <button type="submit">Отправить</button>
    </form>
  );
}

BY React