tgoop.com/React_lib/672
Create:
Last Update:
Last Update:
🔥 Как ускорить работу с формами в 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
BY React

Share with your friend now:
tgoop.com/React_lib/672