Сброс формы реакции-крюка не работает с Controller + antd - PullRequest
3 голосов
/ 23 января 2020

Я пытаюсь использовать форму реакционного крюка вместе с компонентом 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:

Билл указал в комментариях, что почти невозможно определить значения по умолчанию для внешних контролируемых входов. Поэтому мы вынуждены передать значения по умолчанию в метод сброса. Это имеет смысл для меня.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...