Значение defaultValue в input не отображается сразу в хэндлере формы с использованием react-hook-form по следующим причинам:
1. React-hook-form использует управляемые компоненты, а не неуправляемые. Значение поля input устанавливается через установку значения в состояние и обновляется только после взаимодействия пользователя с полем.
2. Значение defaultValue устанавливается только один раз при инициализации формы и не обновляется автоматически.
Если необходимо, чтобы поле с defaultValue виделось обработчиком формы без необходимости нажимать кнопку отправки дважды или очищать поле, можно использовать следующий подход:
1. Используйте контроллируемый компонент, где значение поля input явно устанавливается через состояние.
2. Установите значение по умолчанию defaultValue при инициализации формы.
3. При каждом изменении значения поля input, вызывайте соответствующий обработчик.
Пример:
```jsx
import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
const App = () => {
const { handleSubmit, register, setValue } = useForm();
const [inputValue, setInputValue] = useState('defaultValue');
const onSubmit = (data) => {
console.log(data);
};
const handleChange = (event) => {
setInputValue(event.target.value);
setValue('fieldName', event.target.value); // обновление значения в react-hook-form
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input
type="text"
name="fieldName"
defaultValue={inputValue}
ref={register}
onChange={handleChange}
/>
<input type="submit" value="Submit" />
</form>
);
};
export default App;
```
В приведенном выше примере поле ввода будет отображаться с `defaultValue` (в данном случае 'defaultValue') сразу в хэндлере формы. При каждом изменении значения поля `onChange` введенное значение будет сохраняться в состоянии `inputValue` и также передаваться в `setValue`, чтобы быть доступным в хэндлере формы при отправке формы.