如果需要使用表单，react-hook-form是一个不错的选择

2 年 ago
新, 韵
2 minutes

首先

我认为许多网站上都有表单存在。
无论是像Qiita这样的用户投稿型网站，还是像博客这样的静态网站，在询问页面等地方都可能有表单。

在处理React表单时，应该采取什么样的方法？

通常情况下，我们会首先考虑使用useState或useRef来管理表单的值，并调用API的方法。

然而，状态管理和错误处理等工作变得非常繁琐。

因此，出现了表单库。

2022年目前，React中很受欢迎的是react-hook-form。

这次我们来谈谈关于react-hook-form的事情

什么是React Hook Form？

如上所述，它会为我们管理表单的状态和错误。还有一个好处是，该文档是用日语编写的。

 

这次我将选择一些我个人认为不错的事情来谈谈。

原则

import { useState } from "react";
import { useForm } from "react-hook-form";
import Header from "./Header";

export function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = () => {
    // api叩いたりする
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Header />
      <input {...register("firstName")} placeholder="First name" />
      <select {...register("category", { required: true })}>
        <option value="">Select...</option>
        <option value="A">Option A</option>
        <option value="B">Option B</option>
      </select>
      <textarea {...register("aboutYou")} placeholder="About you" />
      <p>{data}</p>
      <input type="submit" />
    </form>
  );
}

尽管仅仅提到的这一点，可能只会让人感受到它作为状态管理工具的好处，但它还具有许多其他功能，我会一一介绍给你。

校验和错误处理

您可以在提交表单时嵌入验证逻辑。另外，如果使用ErrorMessage组件，您可以处理错误状态并切换显示。

import React from "react";
import { useForm } from "react-hook-form";
import { ErrorMessage } from '@hookform/error-message';

export default function App() {
  const { register, formState: { errors }, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("singleErrorInput", { required: "This is required." })} />
      <ErrorMessage errors={errors} name="singleErrorInput" />
      
      <ErrorMessage
        errors={errors}
        name="singleErrorInput"
        render={({ message }) => <p>{message}</p>}
      />
      
      <input type="submit" />
    </form>
  );
}

提供有关脏乱、有效等方面的状态

useState的hooks返回的不仅仅是error对象。

    • isDirty: フォームに触れられたかどうか

 

    isValid: バリデーションが通っているか

可以退还等等。

例如，我们可以很容易地实现这样的逻辑：只有当用户触碰了表单并且验证未通过时，才禁用提交按钮。

const { formState: { isDirty, isValid } } = useForm();
return <button disabled={!isDirty || !isValid} />;

此外，还提供了其他API，如dirtyFields，可以灵活地获取每个表单的状态。

如果自己想要管理这个范围的状态的话，会非常繁琐，所以非常感激。

处理并管理提交状态

同样，formState中包含了isSubmitted和isSubmitSuccessful等。

所以，在表单提交成功时进行重定向。

可以轻松地编写类似的处理方式。

const { push } = useRouter()
const { formState: { isSubmitSuccessful } } = useForm();

useEffect(()) => {
  if (isSubmitSuccessful) {
    push('/success')
  }
}, [isSubmitSuccessful]}

在提交中不要堆砌过多的处理，将关注点分离出来，这样写代码非常好。

如果有其他需要，在表单提交后重置表单内容的情况下，还可以使用名为resetFiled的API来实现。

表單提供者

这个Provider提供了处理表单状态和错误的钩子函数，使得我们可以在子组件中灵活地处理表单的错误状态和状态。通常情况下我们会将表单切割成不同的组件，所以子组件能够方便地获取和处理表单的错误状态和状态是很好的。

import React from "react";
import { useForm, FormProvider, useFormContext } from "react-hook-form";

export default function App() {
  const methods = useForm();
  const onSubmit = data => console.log(data);

  return (
    <FormProvider {...methods} > // pass all methods into the context
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input type="submit" />
      </form>
    </FormProvider>
  );
}

function NestedInput() {
  const { register } = useFormContext(); // retrieve all hook methods
  return <input {...register("test")} />;
}

总结

虽然还有很多我没有介绍到的内容，但我挑选了一些我个人认为不错的内容来写关于 react-hook-form 的文章。

请务必在查看各种官方文档的同时尝试使用。

bannerAds