Question

我有一张表格。

export const UserInfoForm = (props) => {
  const [user] = props
  const [name, setName] = React.useState(user ? user.name : "");
  const [intro, setIntro] = React.useState(user ? user.intro: "");

   const [
    nameValidationState,
    setNameValidationState,
  ] = React.useState("");

  const [
    introValidationState,
    setIntroValidationState,
  ] = React.useState("");

  return (
    <form>
     <Input defaultValue={name} onChange={
      () => {
           if(validateForm()) {
             setNameValidatetionState("success");
           } else {
             setNameValidationState("false");
           }
           setName(e.targeto.value);
        }
      }
     />
     <Input defaultValue={intro} />
    </form>
  )

}

代码已简化。更新用户信息时会发生我的问题。因为它以初始值显示。有时我不想更改其他信息，但要更改名称。因此，请保持输入字段不变。

但是我的验证逻辑发生在onChange函数中。即使我没有在字段中键入，表单也无法通过验证。

那我该如何解决这个问题？

Answer 1

您可以在最后即onSubmit进行验证。因此，假设您填写了所有字段，然后按提交，然后再提交，请验证所有字段并突出显示错误，以便用户可以更正它们。您还可以使用一个名为Formik的库，该库使这类验证非常直观和容易。

在React中没有onChange的情况下验证表单

1 个答案: