React组件中的输入验证

Question

现在，我正在使用React，并面临一个问题。添加了验证，但不起作用。我的代码如下。

<TextField
margin="dense"
id="email"
label="Email"
type="input"
fullWidth
{...register("email", {
required: true,
pattern: {
value: /S+@S+.S+/,
message: "Entered value does not match email format",
},
})}
value={userData.email}
onChange={(e) =>
setUserData({ ...userData, email: e.target.value })
}
/>

以下声明；

const {
register,
} = useForm<IUserData>();

export declare interface IUserData {
id?: number;
userName?: string;
email?: string;
realName?: string;
phone?: string;
status?: boolean;
role?: number;
emailVerified?: boolean;
phoneVerified?: boolean;
};

有什么好的方法来实现验证吗？

Answer 1

您的验证写得正确，但调用setUserData不正确，请像一样尝试

onChange={(e) =>
setUserData(prev => { 
return {
...prev,
email: e.target.value
}})
}

演示