Для передачи значения свойства `name` в компонент при использовании React Hook Form и улучшения взаимодействия между `useForm` и компонентом ввода текста (`InputText`), можно воспользоваться компонентом `Controller`, который предоставляет возможность управлять значениями и ошибками полей формы.
Вот пример, как можно это реализовать:
### Шаг 1: Создание компонента InputText
Компонент `InputText` должен принимать ряд props, включая `control`, `name`, `rules` для валидации и `errors` для отображения ошибок.
```javascript
import React from 'react';
import { Controller } from 'react-hook-form';
const InputText = ({ control, name, rules, errors }) => {
return (
<div>
<Controller
name={name}
control={control}
rules={rules}
render={({ field }) => (
<div>
<input {...field} />
{errors[name] && <p>{errors[name].message}</p>}
</div>
)}
/>
</div>
);
};
export default InputText;
```
### Шаг 2: Использование компонента в форме
В основном компоненте формы используйте `useForm` для управления состоянием формы и передачи нужных значений в `InputText`.
```javascript
import React from 'react';
import { useForm } from 'react-hook-form';
import InputText from './InputText';
const MyForm = () => {
const { control, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<InputText
control={control}
name="firstName"
rules={{ required: "First name is required" }}
errors={errors}
/>
<InputText
control={control}
name="lastName"
rules={{ required: "Last name is required" }}
errors={errors}
/>
<button type="submit">Submit</button>
</form>
);
};
export default MyForm;
```
### Как это работает
1. **Controller**: Компонент `Controller` позволяет обернуть ваш элемент ввода и связывает его с React Hook Form. Он обрабатывает `onChange`, `onBlur` и `value` полей из формы.
2. **Правила валидации**: Вы можете добавить правила валидации путем передачи объекта `rules` в `Controller`. Это позволяет управлять валидацией непосредственно в `InputText`.
3. **Ошибки**: Вы можете передавать объект `errors` из `useForm` в ваш компонент `InputText`, чтобы отображать сообщения об ошибках, связанные с конкретным полем.
### Заключение
Этот подход обеспечивает более модульную структуру, где `InputText` может быть легко использован в разных формах с различными правилами валидации и обработкой ошибок. Это упрощает читабельность и поддержку кода.