React Hook表格教程-DEV365 开发者社区

React Hook表单是一个库，可帮助您处理React应用程序中的形式验证和提交。它轻巧，易于使用，并提供出色的性能。让我们以示例来研究教程。

步骤1：设置

要开始，您需要设置一个新的React项目或导航到您现有的项目目录。确保您在计算机上安装了NODE.JS和NPM（节点软件包管理器）。运行以下命令使用Create React App：
创建一个新的React项目

npx create-react-app react-hook-form-tutorial

创建项目后，导航到项目目录：

cd react-hook-form-tutorial

步骤2：安装React Hook表单

现在您已经设置了React项目，可以将React Hook表单作为依赖项安装。打开终端并运行以下命令：

npm install react-hook-form

步骤3：基本表单设置

在此步骤中，您将创建一个带有React Hook表单的基本表单。打开src/App.js文件并用以下代码替换其内容：

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

function App() {
  const { register, handleSubmit } = useForm();

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>
        Name:
        <input {...register('name')} />
      </label>
      <br />
      <label>
        Email:
        <input {...register('email')} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

在此代码中，您从react-hook-form库中导入了useForm钩。 useForm钩初始化了react钩形式，并提供了有用的功能和属性，例如register和handleSubmit。

register函数用于以形式注册输入字段。它在输入字段和表单数据之间创建关联。

handleSubmit函数负责处理表单提交。它采用提交表单时将执行的回调函数。在上面的示例中，onSubmit函数将表单数据记录到控制台。

步骤4：形式验证

React Hook形式使得易于验证形式输入。让我们在表单字段中添加一些验证规则。修改src/App.js文件，如下所示：

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

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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>
        Name:
        <input {...register('name', { required: true })} />
      </label>
      {errors.name && <p>This field is required.</p>}
      <br />
      <label>
        Email:
        <input
          {...register('email', {
            required: true,
            pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
          })}
        />
      </label>
      {errors.email && <p>Please enter a valid email address.</p>}
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

在更新的代码中，我们使用React Hook表单在表单字段中添加了表单验证。

对于name字段，我们添加了验证规则required: true。这意味着需要该字段，并且不能空无一人。如果字段是空的，则错误消息“需要此字段”。将显示。

对于email字段，我们添加了两个验证规则。首先，我们添加了required: true，以使其成为必需的字段。此外，我们添加了pattern规则，以使用正则表达式执行有效的电子邮件格式。如果将电子邮件字段空白或输入无效的电子邮件格式，则错误消息“请输入有效的电子邮件地址”。将显示。

useForm返回的formState对象提供了对当前表单状态的访问。在这种情况下，我们使用formState的errors属性检查每个字段是否有任何验证错误。

步骤5：显示表单提交错误

在此步骤中，如果有的话，我们将更新代码以显示提交错误。如下所示，修改onSubmit函数：

const onSubmit = (data) => {
  // Simulating an asynchronous submission
  return new Promise((resolve) => {
    setTimeout(() => {
      const shouldFail = Math.random() < 0.5;
      if (shouldFail) {
        // If submission fails, set an error message
        alert('Submission failed. Please try again later.');
      } else {
        // If submission succeeds, log the data
        console.log(data);
      }
      resolve();
    }, 2000); // Simulating a 2-second delay
  });
};

在更新的代码中，我们修改了onSubmit函数，以模拟使用setTimeout函数的异步提交。在setTimeout回调中，我们随机确定提交是应成功还是失败。如果失败，我们会显示一个错误消息。如果成功，我们将表单数据记录到控制台。

步骤6：完成教程

就是这样！您已在React应用程序中成功实现了React Hook表格。要查看“行动中的表单”，请通过运行以下命令来启动开发服务器：

npm start

打开浏览器并访问http://localhost:3000以查看表格。尝试使用有效和无效的数据提交表格，以查看行动中的验证和提交处理。

可以随意自定义表单并探索React Hook表单提供的其他功能和选项。您可以参考有关高级用法和功能的更多详细信息。

我希望本教程可以帮助您开始使用React Hook Form。愉快的编码！

关于作者。 Geoffrey Callaghan是Fabform.io的程序员，在form backend团队中工作。