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

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的库，使这些类型的验证非常直观和简单。