Next.js 中处理表单的五种正确姿势

面试官：小伙子，你的数组去重方式惊艳到我了

Next.js 是一种流行的 React 框架，它提供了一些方便的功能和工具，可以帮助开发者更高效地构建 Web 应用程序。在开发前端应用程序时，表单是一个必不可少的功能，因此在本文中，我们将介绍 Next.js 中处理表单的五种正确姿势。这五种方法对于每个使用 Next.js 或 React 的开发者都非常重要，因为它们能够大大提高在开发表单相关功能时的效率。

概述

在处理表单时，我们需要考虑的有以下几个方面：如何获取表单的值？如何验证表单？如何防止表单的重复提交？如何将表单数据发送到服务器？

接下来，我们将讨论一些与这些问题相关的技术，并演示如何实现它们。

第一种姿势：使用 元素

在 Next.js 中，我们可以像在传统 HTML 中一样使用 <form> 元素。此方法需要在使用 HTML 标记的同时配合使用 onSubmit 处理程序来处理表单提交。当表单被提交时，使用 event.preventDefault() 阻止表单提交，以便可以执行其他操作。

下面是一个示例代码：

------ - -------- - ---- -------

-------- --------------------- -
  ----- ------------ -------------- - ------------

  ----- ------------ - ------- -- -
    ----------------------
    -----------------------
  -

  ----- ------------ - ------- -- -
    ---------------------------------
  -

  ------ -
    ----- ------------------------
      ------ ------------------------------
      ------ ----------- ---------- ------------------ ----------------------- --
      ------- -----------------------------
    -------
  -
-

在这个例子中，我们使用 useState 钩子来创建一个状态变量 inputValue 和一个处理程序 handleSubmit 来处理表单的提交。handleChange 处理程序将输入值保存在 inputValue 变量中。

这个方法执行起来非常简单，但需要注意的是，通常我们需要防止表单的重复提交。此外，这种方法不是太安全，因为它将表单数据直接传输到服务器端。

第二种姿势：使用无状态组件

在 Next.js 和 React 中，我们可以使用无状态组件来渲染表单。这个方法需要将每个表单元素的值绑定到一个状态变量。接下来，我们使用 onSubmit 处理程序来处理表单的提交，并使用 event.preventDefault() 防止表单的默认提交行为。

下面是一个示例代码：

------ - -------- - ---- -------

-------- ------------------------ -
  ----- ------------ -------------- - ------------

  ----- ------------ - ------- -- -
    ----------------------
    -----------------------
  -

  ----- ------------ - ------- -- -
    ---------------------------------
  -

  ------ -
    -----
      ------ ------------------------------
      ------ ----------- ---------- ------------------ ----------------------- --
      ------- ------------- --------------------------------------
    ------
  -
-

这个方法使用无状态组件来渲染整个表单，并使用 useState 钩子来保存状态变量 inputValue。handleChange 处理程序将输入值保存到 inputValue 变量中。handleSubmit 处理程序则处理表单的提交。

这个方法的好处是它不需要使用 <form> 元素，并且可以避免重复提交。不过，这个方法需要手动处理表单的验证，因此需要更多的代码来添加表单验证。

第三种姿势：使用 React Hook Form

React Hook Form 是一个流行的 React 表单验证库，可以帮助我们更轻松地处理表单相关问题。这个方法需要使用 useController 钩子来控制表单，然后将表单数据传递到 handleSubmit 处理程序中。

下面是一个示例代码：

------ - -------------- ------- - ---- -----------------

-------- ---------- -
  ----- -
    --------
    -------------
    ---------- - ------ --
  - - ---------

  ----- -
    ------ - ------ -------- --
  - - ---------------
    ----- --------
    ------------- ---
    ------ - --------- ---- --
  --

  ----- -------- - ------ -- -
    -----------------------
  -

  ------ -
    ----- ----------------------------------
      ------ ------------------------------
      ------ ----------- ---------- ------------- ------------------- --
      ------------- -- -------- -- -------------
      ------- -----------------------------
    -------
  -
-

这个方法使用 React Hook Form 来控制表单，并在 handleSubmit 处理程序中使用表单数据。useController 钩子将单个表单控件的值添加到表单状态中，并使用 rules 属性来添加验证规则。

这个方法的优点是它可以自动处理表单验证，并减少了开发者需要处理的代码。此外，这个方法传输的数据比较安全，因为它们被编码后发送到服务器端。

第四种姿势：使用 Formik

Formik 是另一个流行的 React 表单验证库，可以帮助我们更轻松地处理表单相关问题。这个方法需要使用 Formik 组件来控制表单，并将表单数据传递到 handleSubmit 处理程序中。

下面是一个示例代码：

------ - ------- ----- ------ ------------ - ---- --------

-------- ------------ -
  ----- -------- - -------- -- -
    -------------------------
  -

  ------ -
    ------- ---------------- ------ -- -- --------------------
      ------
        ------ ------------------------------
        ------ ----------- ------------ --
        ------------- ------------ --------------- --
        ------- -----------------------------
      -------
    ---------
  -
-

这个方法使用 Formik 组件来控制表单，并将表单数据传递到 handleSubmit 处理程序中。Formik 组件可以自动处理字段验证和表单验证，并通过 ErrorMessage 组件来显示错误消息。

这个方法的优点是它可以自动处理表单验证，并减少了开发者需要处理的代码。此外，这个方法提交的数据也比较安全，因为它们被编码后发送到服务器端。

第五种姿势：使用 Yup

Yup 是一个流行的 JavaScript 验证库，可以帮助我们更轻松地处理表单相关问题。这个方法需要使用 Yup 来添加验证规则，并使用它来验证表单的值。

下面是一个示例代码：

------ - -------- - ---- -------
------ - -- --- ---- -----

----- ------ - --------------------
  ------ ---------------------------- -- -----------
--

-------- --------- -
  ----- ------------ -------------- - ------------
  ----- ------- --------- - ------------

  ----- ------------ - ------- -- -
    ----------------------
    ------
      ----------- ------ ---------- --
      -------- -- ------------------------
      -------------- -- ------------------------
  -

  ----- ------------ - ------- -- -
    ---------------------------------
  -

  ------ -
    --
      ------ -- ---------------
      ----- ------------------------
        ------ ------------------------------
        ------ ----------- ---------- ------------------ ----------------------- --
        ------- -----------------------------
      -------
    ---
  -
-

这个方法使用 Yup 来添加验证规则，并使用它来验证表单的值。它还需要使用 useState 钩子来保存表单的值和错误信息。handleSubmit 处理程序使用 validate 方法来验证表单，并捕获任何验证错误。

这个方法的优点是它可以自动处理表单验证，并减少了开发者需要处理的代码。此外，这个方法也可以在客户端执行数据验证，而不需要将数据传输到服务器端。

结论

在本文中，我们介绍了 Next.js 中处理表单的五种正确姿势，包括使用 <form> 元素、无状态组件、React Hook Form、Formik 和 Yup。每种方法都有其优点和缺点，但它们都可以大大提高表单处理的效率和可靠性。希望这篇文章对你有所帮助，并能够帮助你更好地处理表单相关问题。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6709e81ed91dce0dc87ceb45

阅读全文

猜你喜欢

  • Mongoose 中使用生命周期 hooks 的详细指南

    Mongoose 是 Node.js 的一个 ORM 框架，用于简化与 MongoDB 数据库的交互。Mongoose 提供了许多有用的功能，其中包含生命周期 hooks。

    7 天前
  • 如何将 Tailwind CSS 应用于 WordPress 主题开发中

    在 WordPress 主题开发中，样式是非常重要的。而使用 Tailwind CSS 这样的 CSS 框架能够提高开发效率，同时也能帮助我们更好地管理我们的代码。

    7 天前
  • Apollo 和 Redis：如何缓存 GraphQL 查询

    GraphQL 是一种用于 API 开发的查询语言，它是前端领域的一个重要技术。然而，GraphQL 的查询可能会对服务器造成很大的负荷，导致响应变慢甚至崩溃。为了解决这个问题，我们可以使用缓存技术来...

    7 天前
  • 无障碍模式下的表单设计：方便用户与减少错误

    对于许多人来说，表单是他们与网站或应用程序进行交互的方式之一，因此，表单设计的重要性不言而喻。在我们设计表单时，考虑到无障碍用户的需求能够为他们提供方便而且减少错误，同时也提高了所有用户的用户体验。

    7 天前
  • Enzyme 测试中 React 组件的扩展性及可维护性

    Enzyme 测试中 React 组件的扩展性及可维护性 React 是目前最受欢迎的前端框架之一，但是随着 Web 应用程序规模的增大和功能的复杂性增加，维护和扩展现有代码变得越来越困难。

    7 天前
  • Socket.io 多服务器集群部署方式

    在现代 Web 应用程序中，即时通信被广泛使用。 Socket.io 是一个流行且强大的 Node.js 库，用于实现这种实时通信。但是，在大型应用程序中，单个服务器可能无法处理高流量和大量连接。

    7 天前
  • Material Design 教程之 Input Text Field 组件详解

    在许多 Web 应用程序中，文本输入字段是其中的核心组件之一。Material Design 提供了一套丰富的输入文本字段组件，它们被设计成能够很好地适应不同的输入场景，并且提供了强大的交互性和可访问...

    7 天前
  • 初学者如何使用 Chai 进行测试及注意事项

    在前端开发中，测试是至关重要的一环。通过测试，可以验证代码的正确性，避免在上线后出现各种问题。而 Chai 是一个流行的 JavaScript 测试库，可以帮助开发者编写更好的测试用例。

    7 天前
  • Hapi 框架遇到的跨站请求伪造（CSRF）问题及解决方法

    在开发 Web 应用程序的过程中，安全始终是一个非常重要的考虑因素。其中之一就是跨站请求伪造（CSRF），它是一种利用已登录用户的身份信息来伪造可用 HTTP 请求的攻击方式。

    7 天前
  • ECMAScript 2019 中如何使用 Symbol 做枚举

    在 JavaScript 中，我们经常需要使用枚举来表示一组固定的值。ES6 中引入了 Symbol 类型，可以用来创建唯一的、不可变的值。Symbol 的引入也提供了一种新的方式来实现枚举。

    7 天前
  • 在 Vue 中集成 ESLint 优化代码

    作为一名前端开发者，我们都希望写出优雅、简洁、规范的代码。然而，每个人的编码习惯和风格都不尽相同，有时会出现不符合开发规范的情况。这时候，我们需要工具来帮助我们提高代码的规范性和质量。

    7 天前
  • 如何在 Django 项目中使用 Tailwind CSS 进行前端开发

    Tailwind CSS 是一种快速、灵活的 CSS 框架，可用于构建具有高度定制化样式的前端设计。在 Django 项目中使用 Tailwind CSS 可以更加轻松地进行前端开发，本文将会介绍如何...

    7 天前
  • Node 和 GraphQL Middleware：如何解决 `unhandledPromiseRejection` 错误

    在使用 Node.js 开发应用程序过程中，我们可能会遇到一些未处理的 Promise 拒绝（Promise rejection）错误，称为 unhandledPromiseRejection 错误。

    7 天前
  • MongoDB 复制集的安装和配置教程

    MongoDB 是一款开源的 NoSQL 数据库，它具有高可用性、可扩展性、灵活性等特点，因此在互联网领域广受欢迎。在生产环境中，多数情况下我们需要保证数据库的高可用性，MongoDB 复制集则是一种...

    7 天前
  • 在 React 中使用 CSS Modules

    CSS Modules 是一个可以帮助我们在编写 CSS 时避免样式污染的工具，同时它也与 React 很好的结合在了一起，成为了 React 中样式处理的重要工具。

    7 天前
  • Flexbox 布局在响应式设计中的应用

    Flexbox 是一种用于网页布局的 CSS 技术，它可以帮助我们快速、简便地实现复杂的页面布局。在响应式设计中，Flexbox 布局可以发挥重要作用，能够让我们轻易地创建出适应各种屏幕尺寸的排版，适...

    7 天前
  • React Native 项目单元测试：使用 Jest 进行测试

    前言： 随着 React Native 技术的不断发展，越来越多的移动端开发者选择使用 React Native 来进行跨平台开发。 在开发过程中，针对文件、组件、函数的测试至关重要。

    7 天前
  • Docker Hub 镜像构建及常见问题解决方案

    Docker 已成为现今最为流行的容器化工具之一，其中 Docker Hub 是 Docker 公司提供的 Docker 镜像仓库。借助 Docker Hub，我们可以方便地存储、分享、拉取和管理 D...

    7 天前
  • PM2 进程反复重启的问题解决方法

    如果你是一个前端开发人员，使用 PM2 来管理 Node.js 应用程序进程可能是家常便饭。然而，有时 PM2 进程会不停地重启，这显然会导致应用程序无法正常运行。

    7 天前
  • ECMAScript 2019 中的静态方法 Object.fromEntries 和 Array.from：构造对象和数组更方便

    ECMAScript 2019 中的静态方法 Object.fromEntries 和 Array.from：构造对象和数组更方便 在 ECMAScript 2019 中，JavaScript 引入了...

    7 天前

相关推荐

    暂无文章