React Hook Form 概述及使用详解

npm install react-hook-form

yarn add react-hook-form

import { useForm } from "react-hook-form";
function MyForm() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username", { required: true })} placeholder="用户名" />
      {errors.username && <p>用户名是必填项</p>}
      <input {...register("password", { required: true, minLength: 6 })} placeholder="密码" />
      {errors.password && <p>密码至少需要6个字符</p>}
      <button type="submit">提交</button>
    </form>
  );
}

<input
  {...register("email", { 
    required: "邮箱是必填项", 
    pattern: {
      value: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/,
      message: "请输入有效的邮箱地址"
    }
  })}
/>
{errors.email && <p>{errors.email.message}</p>}

<input
  {...register("age", {
    validate: (value) =>
      value >= 18 || "年龄必须大于或等于 18"
  })}
/>
{errors.age && <p>{errors.age.message}</p>}

function MultiStepForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const [step, setStep] = React.useState(1);
  const onNext = () => setStep(step + 1);
  const onPrev = () => setStep(step - 1);
  const onSubmit = (data) => {
    console.log("表单数据：", data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {step === 1 && (
        <div>
          <input {...register("username", { required: true })} placeholder="用户名" />
          {errors.username && <p>用户名是必填项</p>}
          <button type="button" onClick={onNext}>下一步</button>
        </div>
      )}
      {step === 2 && (
        <div>
          <input {...register("email", { required: true })} placeholder="邮箱" />
          {errors.email && <p>邮箱是必填项</p>}
          <button type="button" onClick={onPrev}>上一步</button>
          <button type="submit">提交</button>
        </div>
      )}
    </form>
  );
}

import { TextField, Button } from "@mui/material";
import { useForm, Controller } from "react-hook-form";
function MaterialForm() {
  const { control, handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="username"
        control={control}
        defaultValue=""
        render={({ field }) => (
          <TextField {...field} label="用户名" variant="outlined" fullWidth />
        )}
      />
      <Button type="submit" variant="contained" color="primary">
        提交
      </Button>
    </form>
  );
}

type FormData = {
  username: string;
  email: string;
};
const { register, handleSubmit } = useForm<FormData>();