react-hook-form 输入

在React应用程序中处理表单通常是一个挑战。 React Hook Form是一个处理表单的简便方法，它使表单的输入、验证和提交变得容易。

安装

首先，我们需要安装 react-hook-form：

$ npm install react-hook-form

输入组件

react-hook-form 提供了一个 Controller 组件，它使我们可以轻松地连接表单输入和 react-hook-form 基础结构。用法示例：

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

function MyForm() {
  const { control } = useForm();
  return (
    <form>
      <Controller
        name="firstName"
        control={control}
        defaultValue=""
        render={({ field }) => <input {...field} />}
      />
      <input type="submit" />
    </form>
  );
}

这样，我们就可以使用 defaultValue 属性设置表单项的默认值，同时自动处理表单项的 name 和 onChange 事件。注意，在这个组件中，我们需要设置 control 属性。这是一个 useForm 返回的对象，我们将在后面详细介绍。

输入控件

react-hook-form 对输入控件有丰富的支持。下面是一些示例：

输入框

<Controller
  name="firstName"
  control={control}
  defaultValue=""
  render={({ field }) => <input {...field} />}
/>

多选框

<Controller
  control={control}
  name="checkbox"
  defaultValue={false}
  render={({ field }) => <Checkbox {...field} />}
/>

单选框

<Controller
  control={control}
  name="radio"
  defaultValue=""
  render={({ field }) => (
    <>
      <input type="radio" {...field} value="yes" />
      <input type="radio" {...field} value="no" />
    </>
  )}
/>

选择框

<Controller
  control={control}
  name="select"
  defaultValue=""
  render={({ field }) => (
    <select {...field}>
      <option value="yes">Yes</option>
      <option value="no">No</option>
    </select>
  )}
/>

验证

react-hook-form 使验证表单变得简单。它提供了许多方便的验证器，例如必填验证、最大值、最小值等等。这些验证器使我们可以自定义验证规则。例如：

<Controller
  name="age"
  control={control}
  defaultValue=""
  rules={{ required: true, max: 60, min: 18 }}
  render={({ field }) => <input {...field} />}
/>

在这个例子中，使用 rules 属性将验证器传递给组件。required 表示必填项，max 和 min 分别设置了最大和最小值。

提交

最后一步是提交表单。react-hook-form 提供了一个 handleSubmit 方法，它将自动处理表单验证，并提交表单数据。

function MyForm() {
  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 }) => <input {...field} />}
      />
      <input type="submit" />
    </form>
  );
}

这里的 onSubmit 是处理表单数据的回调函数。如果表单验证失败，则表单不会被提交。

总结

react-hook-form 是一种简单的方法，用于在React中处理表单。它提供了易于使用的API，使我们可以轻松地处理表单输入、验证和提交。