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
    }})
}

Demo

React 组件中的输入验证

Input Validation in React Components

validation

reactjs