如何在更新輸入字段時隱藏 React Js 中的驗證錯誤？

Question

我是 ReactJs 的新手，我有一個用 react-hook-form 驗證的表單。 每當我提交表單時，都會顯示錯誤，這很好，但是在更新輸入字段后，錯誤仍然存在。 我希望在輸入字段更改后隱藏錯誤。 我知道應該用鈎子來完成，但由於我是 React 新手，所以我無法編寫我的邏輯。

這是我的代碼。

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>
  );
}

更新輸入字段后，有人可以指導我如何使用鈎子隱藏錯誤消息嗎？

Answer 1

OnChange，您可以更新 state 錯誤 object。

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



handleChange = (e) => {

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