Как инпут сделать disabled при изменении state?

Question

[MagnoliasFlwrs]

есть форма ( chackra ui + react-hook-form )
мне необходимо по изменению стейта временной блокировки отправки формы , блокировать это форму. но я не понимаю, как мне это сделать. подскажите. пожалуйста, в документации я не нашла (

const {register,
        setValue ,
        setFocus ,
        watch,
        handleSubmit,
        formState: {errors}} = useForm();

<form  onSubmit={firstEnter ? handleSubmit(setNewPassord) : handleSubmit(authUserFunc)}>
                <VStack width='300px' spacing='20px'>
                    <FormControl>
                        <FormLabel>Имя пользователя</FormLabel>
                        <Input {...register('userlogin' , {
                            required: {
                                message:'Обязательное поле',
                                value:true
                            }
                        })} type='text' placeholder='Имя пользователя' size='lg'/>
                        <Text>{errors?.userlogin?.message}</Text>
                    </FormControl>

                    <FormControl>
                        <FormLabel>Пароль</FormLabel>
                        <Input  {...register('userpass' , { required: {
                                message:'Обязательное поле',
                                value:true
                            }
                        })} type='password' size='lg'/>
                        <Text>{errors?.userpass?.message}</Text>
                    </FormControl>
                    {
                        firstEnter ?
                            <FormControl>
                                <FormLabel>Пароль</FormLabel>
                                <Input {...register("confirmPassword", {
                                    required: true,
                                    validate: (val)=> {
                                        if (watch('userpass') != val) {
                                            return "Пароль не совпадает";
                                        }
                                    },
                                })} type='password' size='lg'/>
                                <Text>{errors?.confirmPassword?.message}</Text>
                            </FormControl> :
                            ''
                    }
                    <Button  width='100%' colorScheme='#e4e9eb' size='lg' variant='outline' type='submit' >Войти</Button>
                </VStack>
            </form>

Answer 1

[Владислав Грудин]

Вот так можно блокировать кнопку во время отправки формы:

const {register, setValue , setFocus , watch, handleSubmit, formState: {errors, isSubmitting}} = useForm();

<form  onSubmit={firstEnter ? handleSubmit(setNewPassord) : handleSubmit(authUserFunc)}>
   ...
   <Button width='100%' colorScheme='#e4e9eb' size='lg' variant='outline' type='submit' isLoading={isSubmitting}>Войти</Button>
</form>

https://chakra-ui.com/docs/components/button#butto...

Comments

[MagnoliasFlwrs]

спасибо большое, попробую!