Frontender Libs - обзор библиотек JS / CSS

Использование useFieldArray в React

useFieldArray — это хук из библиотеки React Hook Form, помогающий управлять массивами полей в динамических формах.

Пример:

import React from 'react';
import { useForm, useFieldArray, Controller } from 'react-hook-form';

function DynamicForm() {
  const { control, handleSubmit } = useForm({ defaultValues: { items: [''] } });
  const { fields, append, remove } = useFieldArray({ control, name: 'items' });

  return (
    <form onSubmit={handleSubmit(console.log)}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <Controller
            name={`items[${index}]`}
            control={control}
            render={({ field }) => <input {...field} />}
          />
          <button type="button" onClick={() => remove(index)}>Удалить</button>
        </div>
      ))}
      <button type="button" onClick={() => append('')}>Добавить элемент</button>
      <input type="submit" />
    </form>
  );
}

export default DynamicForm;

👉 @sWebDev

👍3

www.tgoop.com/sWebDev/3140

1.4K viewsSep 16, 2024 at 16:00

Использование useFieldArray в React

useFieldArray — это хук из библиотеки React Hook Form, помогающий управлять массивами полей в динамических формах.

Пример:

import React from 'react';
import { useForm, useFieldArray, Controller } from 'react-hook-form';

function DynamicForm() {
  const { control, handleSubmit } = useForm({ defaultValues: { items: [''] } });
  const { fields, append, remove } = useFieldArray({ control, name: 'items' });

  return (
    <form onSubmit={handleSubmit(console.log)}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <Controller
            name={`items[${index}]`}
            control={control}
            render={({ field }) => <input {...field} />}
          />
          <button type="button" onClick={() => remove(index)}>Удалить</button>
        </div>
      ))}
      <button type="button" onClick={() => append('')}>Добавить элемент</button>
      <input type="submit" />
    </form>
  );
}

export default DynamicForm;

BY Frontender Libs - обзор библиотек JS / CSS