Я пытаюсь использовать форму реакционного крюка вместе с компонентом antd <Input />
Я не получаю reset
для работы с <Controller />
Вот мой код:
const NormalLoginForm = () =>{
const {reset, handleSubmit, control} = useForm();
const onSubmit = handleSubmit(async ({username, password}) => {
console.log(username, password);
reset();
});
return (
<form onSubmit={onSubmit} className="login-form">
<Form.Item>
<Controller as={<Input
prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
autoFocus={true}
placeholder="Benutzername"
/>} name={'username'} control={control}/>
</Form.Item>
<Form.Item>
<Controller as={<Input
prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
type="password"
placeholder="Passwort"
/>} name={'password'} control={control}/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button">
Log in
</Button>
</Form.Item>
</form>
);
}
Я ожидаю, что два поля ввода очищаются при отправке формы. Но это не работает.
Я что-то здесь упускаю?
Пример на Stackblitz https://stackblitz.com/edit/react-y94jpf?file=index.js
Редактировать:
RHFInput
упомянутый здесь Форма React Hook с AntD Styling теперь является частью реагирующей формы крюка и был переименован в Controller
. Я уже использую это.
Я понял, что настройка
reset();
на
reset({
username:'',
password:''
});
решает проблему.
Однако - я хотел сбросить всю форму без явного присвоения новых значений.
Редактировать 2:
Билл указал в комментариях, что почти невозможно определить значения по умолчанию для внешних контролируемых входов. Поэтому мы вынуждены передать значения по умолчанию в метод сброса. Это имеет смысл для меня.