Блог

Я новичок в ReactJS, и у меня есть форма, проверенная с помощью react-hook-формы. Всякий раз, когда я отправляю форму, я получаю отображаемые ошибки, что нормально, но при обновлении полей ввода ошибка остается. Я хочу, чтобы ошибки были скрыты после изменения поля ввода. Я знаю, что это должно быть сделано с помощью крючков, но так как я новичок в реагировании, я не могу закодировать свою логику.

Вот мой код.

 
export default function SimpleCard() {
  const classes = useStyles();
  const { register, handleSubmit, errors, reset } = useForm();
  const onSubmit = (data, event) => {
    event.preventDefault();
    console.log(JSON.stringify(data));
    reset();
  }
  return (
    <div className={classes.card}>
        <Card className={classes.cardBorder} elevation={12}>
        <CardContent>
            <Typography className={classes.title}>
                Log in
                <br/>
                <span className={classes.subtitle}>(Employee Only)</span>
            </Typography>
            <hr/>
            </CardContent>
            <form onSubmit={handleSubmit(onSubmit)} className={classes.root}>
              <TextField
                size="normal"
                placeholder="Enter Your E-mail Address"
                label="Email Address"
                variant="outlined"
                fullWidth
                name="email"
                inputRef={register({
                  required: "E-mail Address is required.",
                })}
                error={Boolean(errors.email)}
                helperText={errors.email?.message}
              />            
              <TextField
                size="normal"
                placeholder="Enter Your Password"
                label="Password"
                variant="outlined"
                type="Password"
                fullWidth
                name="password"
                inputRef={register({
                  required: "Password is required.",
                })}
                error={Boolean(errors.password)}
                helperText={errors.password?.message}
              />
            <div className={classes.dokmaBG}>
                <Button type="submit" variant="contained" size='large' className={classes.dokma}>
                   <b>Login</b> 
                </Button>
            </div>
            </form>
        </Card>
    </div>
  );
}
 

Может ли кто-нибудь подсказать мне, как использовать крючки для скрытия сообщений об ошибках после обновления поля ввода?

При обмене вы можете обновить объект ошибки состояния.

 const [error, setError] = useState({})



handleChange = (e) => {

let e = {...error}
setError(e)
}