ReactHookForm优雅处理表单使用指南

const [value,setValue] = useState('')
<input value={value} onChange={(e)=> setValue(e.target.value)} />

import React, { useRef } from 'react';
function UncontrolledForm() {
  const nameInputRef = useRef(null);
  const emailInputRef = useRef(null);
  const passwordInputRef = useRef(null);
  function handleSubmit(event) {
    console.log('Name:', nameInputRef.current.value);
    console.log('Email:', emailInputRef.current.value);
    console.log('Password:', passwordInputRef.current.value);
    event.preventDefault();
  }
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={nameInputRef} />
      </label>
      <label>
        Email:
        <input type="email" ref={emailInputRef} />
      </label>
      <label>
        Password:
        <input type="password" ref={passwordInputRef} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

import React from "react";
import { useForm } from "react-hook-form";
function MyForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <button type="submit">Submit</button>
    </form>
  );
}

import React from "react";
import { useForm } from "react-hook-form";
function MyForm() {
    const onSubmit = (data) => {
      console.log(data);
    };
    const { register, handleSubmit, formState: { errors } } = useForm();
    return (
      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("firstName", { required: true })} />
        {errors.firstName && <p>First name is required.</p>}
        <input {...register("lastName", { required: true })} />
        {errors.lastName && <p>Last name is required.</p>}
        <button type="submit">Submit</button>
      </form>
    );
}

const { ref, onChange, onBlur, name } = register("firstName");

// ParentForm.jsx
import React from "react";
import { useForm, FormProvider } from "react-hook-form";
import ChildForm from "./ChildForm";
function ParentForm() {
  const methods = useForm();
  const { register, handleSubmit, formState: { errors } } = methods;
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
      <FormProvider {...methods}>
        <form onSubmit={handleSubmit(onSubmit)}>
          <h2>Parent Form</h2>
          <label htmlFor="firstName">First Name</label>
          <input {...register("firstName", { required: true })} />
          {errors.firstName && <p>First name is required.</p>}
          <label htmlFor="lastName">Last Name</label>
          <input {...register("lastName", { required: true })} />
          {errors.lastName && <p>Last name is required.</p>}
          <ChildForm/>
          <button type="submit">Submit</button>
        </form>
    </FormProvider>
  );
}
export default ParentForm;

import React from "react";
import { useFormContext } from "react-hook-form";
function ChildForm() {
  const { register, errors } = useFormContext();
  return (
    <div>
      <h2>Child Form</h2>
      <label htmlFor="childFirstName">Child First Name</label>
      <input {...register("child.firstName", { required: true })} />
      {errors.child?.firstName && <p>Child first name is required.</p>}
      <label htmlFor="childLastName">Child Last Name</label>
      <input {...register("child.lastName", { required: true })} />
      {errors.child?.lastName && <p>Child last name is required.</p>}
    </div>
  );
}
export default ChildForm;

import React from "react";
import { useForm } from "react-hook-form";
function ExampleForm() {
  const { register, handleSubmit, watch } = useForm();
  const onSubmit = (data) => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="hasAge">Do you have an age?</label>
      <select {...register("hasAge")}>
        <option value="yes">Yes</option>
        <option value="no">No</option>
      </select>
      {watch("hasAge") === "yes" && (
        <>
          <label htmlFor="age">Age</label>
          <input {...register("age", { required: true, min: 18 })} />
          {watch("age") && <p>You must be at least 18 years old.</p>}
        </>
      )}
      <button type="submit">Submit</button>
    </form>
  );
}
export default ExampleForm;

import React from "react";
import { useForm, useFieldArray } from "react-hook-form";
function ListForm() {
  const { register, control, handleSubmit } = useForm({
    defaultValues: {
      list: [{ name: "" }, { name: "" }, { name: "" }]
    }
  });
  const { fields, append, remove } = useFieldArray({
    control,
    name: "list"
  });
  const onSubmit = (data) => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input
            {...register(`list.${index}.name`, {
              required: "This field is required"
            })}
            defaultValue={field.name}
          />
          <button type="button" onClick={() => remove(index)}>
            Remove
          </button>
        </div>
      ))}
      <button type="button" onClick={() => append({ name: "" })}>
        Add Item
      </button>
      <button type="submit">Submit</button>
    </form>
  );
}
export default ListForm;

import React from "react";
import { useForm, Controller } from "react-hook-form";
import { TextField, Button } from "@material-ui/core";
function ControllerForm() {
  const { control, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="firstName"
        control={control}
        defaultValue=""
        rules={{ required: true }}
        render={({ field }) => (
          <TextField label="First Name" {...field} />
        )}
      />
      <Controller
        name="lastName"
        control={control}
        defaultValue=""
        rules={{ required: true }}
        render={({ field }) => (
          <TextField label="Last Name" {...field} />
        )}
      />
      <Button type="submit" variant="contained" color="primary">
        Submit
      </Button>
    </form>
  );
}
export default ControllerForm;

import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";
type FormValues = {
  firstName: string;
  lastName: string;
  age: number;
};
function MyForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>();
  const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true })} />
      {errors.firstName && <span>This field is required</span>}
      <input {...register("lastName", { required: true })} />
      {errors.lastName && <span>This field is required</span>}
      <input {...register("age", { required: true, min: 18 })} />
      {errors.age && (
        <span>
          {errors.age.type === "required"
            ? "This field is required"
            : "You must be at least 18 years old"}
        </span>
      )}
      <button type="submit">Submit</button>
    </form>
  );
}