Question

我在输入验证中遇到问题。当我提交并出现错误消息时，验证有效，但是当我按下键盘上的第一个键时，文本区域中没有任何内容并且错误消息消失；之后就可以正常写了。这是一个不便，我不知道为什么会发生这种情况。我正在使用 Material UI 中的 TextArea。登录表单的代码片段如下。


const schema = yup.object().shape({
  username: yup.string().matches(/^[a-z0-9]+$/, 'Must be all lower-case letters.').required(),
  password: yup.string().required(),
})

const Login = props =>  {
  const [formValues, setFormValues] = React.useState({
    username: "",
    password: ""
  });

  const { register,errors, handleSubmit } = useForm({
    resolver: yupResolver(schema),
    mode: 'onSubmit',
  });


  const onSubmit = async (data, e) => {
    e.preventDefault()
    const isValid = await schema.isValid(data)
    if(isValid){
      console.log(data);
    }
  }

  return (
    <Container component="main" maxWidth="xs">
      <div>
        <form onSubmit={handleSubmit(onSubmit)}>
          <TextField
            autoFocus
            required
            fullWidth
            id="username"
            label="Username"
            name="username"
            value={formValues.username}     
            inputRef={register}         
            helperText = {errors.username?.message}
          />
          <TextField
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            value={formValues.password}
            inputRef={register}
            helperText = {errors.password?.message}
          />
          <Button
            type="submit"
            fullWidth
            className={classes.submit}
          >
            Login
          </Button>
        </form>
      </div>
    </Container>
  );
}

Answer 1

我通过在 reValidateMode:"onBlur" 选项中使用 useForm() 解决了这个问题（在 React Native 中）。

这种方式在用户离开输入之前不会重试验证。

是的，并响应钩子表单输入验证错误

1 个答案: