javascript - 如何在更新输入字段时隐藏 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>
  );
}

更新输入字段后，有人可以指导我如何使用钩子隐藏错误消息吗？

标签： javascriptreactjsreact-hooksmaterial-ui

Answer 1

OnChange，可以更新状态错误对象。

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



handleChange = (e) => {

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