安裝並導(dǎo)入useForm，通過(guò)register連接輸入，handleSubmit處理提交，formState獲取錯(cuò)誤；2. 在register中添加required、pattern等規(guī)則實(shí)現(xiàn)內(nèi)置或自定義驗(yàn)證；3. 使用useFieldArray管理動(dòng)態(tài)輸入數(shù)組，支持增刪字段；4. 通過(guò)Controller集成MUI、Ant Design等UI庫(kù)的受控組件；5. 利用watch、touchedFields等實(shí)現(xiàn)實(shí)時(shí)反饋與用戶(hù)體驗(yàn)優(yōu)化，最終構(gòu)建高效、可維護(hù)的表單。

When building interactive forms in React, managing state, validation, and user input efficiently can quickly become complex. That's where React Hook Form shines. It simplifies form handling by minimizing re-renders, leveraging uncontrolled components, and offering a clean, intuitive API. Here's how to build interactive forms effectively using React Hook Form.

1. Setting Up React Hook Form

Start by installing the library:

 npm install react-hook-form

Then, import useForm in your component. This custom hook provides everything you need: register inputs, handle submission, and manage errors.

 import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} placeholder="First Name" />
      {errors.firstName && <p>First name is required</p>}

      <button type="submit">Submit</button>
    </form>
  );
}

The register function connects your inputs to the form state. No need to write onChange , value , or onBlur manually.

2. Adding Validation Rules

React Hook Form supports both built-in and custom validation. You can define rules directly in register .

 <input
  {...register("email", {
    required: "Email is required",
    pattern: {
      value: /^[a-z0-9._% ] @[a-z0-9.] \.[az]{2,}$/,
      message: "Invalid email address"
    }
  })}
  placeholder="Email"
/>
{errors.email && <p>{errors.email.message}</p>}

Common validation options:

• required : Ensures the field isn't empty
• minLength / maxLength : For string length
• min / max : For numbers
• validate : For custom logic (eg, checking password strength)

 password: {
  required: "Password is required",
  minLength: {
    value: 6,
    message: "Password must be at least 6 characters"
  },
  validate: (value) => value !== "password123" || "Too common password"
}

3. Handling Dynamic Inputs and Arrays

For dynamic fields (like adding multiple hobbies), use useFieldArray . It's perfect for managing lists of inputs.

 import { useFieldArray } from 'react-hook-form';

function HobbyForm() {
  const { control, register, handleSubmit } = useForm({
    defaultValues: { hobbies: [""] }
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: "hobbies"
  });

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input
            {...register(`hobbies.${index}`)}
            placeholder="Hobby"
          />
          <button type="button" onClick={() => remove(index)}>Remove</button>
        </div>
      ))}
      <button type="button" onClick={() => append("")}>Add Hobby</button>
      <button type="submit">Submit</button>
    </form>
  );
}

This keeps your form scalable and user-friendly.

4. Integrating with UI Libraries and Components

React Hook Form works seamlessly with controlled components like MUI, Ant Design, or React Select. Use the Controller or useController wrapper.

 import { Controller } from 'react-hook-form';

<Controller
  name="color"
  control={control}
  render={({ field }) => (
    <select {...field}>
      <option value="red">Red</option>
      <option value="blue">Blue</option>
    </select>
  )}
/>

This gives you full control while keeping validation and form state synchronized.

5. Real-Time Feedback and UX Improvements

Enhance user experience with real-time validation and error messages.

• Show errors only after user interaction using touchedFields or dirtyFields .
• Use watch() to observe field values and update UI dynamically (eg, live character count, conditional fields).

 const watchPassword = watch("password");

useEffect(() => {
  if (watchPassword) {
    // Update password strength bar
  }
}, [watchPassword]);

You can also debounce input for search fields or auto-save logic.

React Hook Form keeps your forms performant and maintainable. With minimal boilerplate, solid validation, and great TypeScript support, it's a go-to choice for modern React applications.

Basically, register inputs, define rules, handle submission, and enhance UX — all in a clean, readable way.

以上是用React Hook形式構(gòu)建互動(dòng)形式的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！