React Hook 表单 |创建基本的 ReactJS 注册和登录表单

在 ReactJS 中，创建表单可能是一场噩梦，但使用 react-hook-form 可以顺利完成。该库提供了现代表单所需的所有功能。它简单、快速，并为元素提供独立的重新渲染。

React Hook 表单的特点：

• 开源
• 支持打字稿
• 提供用于检查表单数据的 DevTool
• 提供表单生成器 - 通过拖放创建表单
• 支持 react-native

使用 React Hook Form 的优势：

• 易于学习和构建
• 提供表单验证
• 轻松处理表单提交。
• 我们可以查看任何特定的表单域。
• 我们可以与任何 UI 库集成。
• 提供模式验证

让我们开始构建注册页面：

第 1 步：使用以下命令创建反应应用程序

npx create-react-app shopping-cart

第2步： cd进入项目文件夹

cd shopping-cart

项目结构：项目结构将如下所示。

第 3 步：使用以下命令启动应用程序

npm start
or
yarn start

您将被重定向到您的浏览器。

第 4 步：开始编辑 UI，以免创建基本注册表单。在src/App.js文件中，删除所有代码，然后创建表单。如果您不知道如何构建，也可以参考以下代码。

App.js：创建一个包含姓名、电子邮件和密码字段的简单反应表单。

App.js

// Inside src/App.js
  
import React from "react";
import "./App.css";
  
function App() {
  return (
    <>
      
Registration Form
  
      

        
        
        
        
      
    
  );
}
  
export default App;

App.css：包含 App.js 组件的样式。

应用程序.css

/* Inside src/App.css */
  
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title {
  text-align: center;
  width: 30vw;
  background-color: rgb(190, 164, 214);
  padding: 2vw 1vw;
  border-radius: 10px 10px 0 0;
  font-size: 2rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.App {
  text-align: center;
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 30vw;
  padding: 2vw 1vw;
  background-color: rgb(250, 194, 194);
  border-radius: 0 0 10px 10px;
}
input {
  border: 1px solid rgb(172, 171, 171);
  border-radius: 10px;
  padding: 1vw 1vw;
  outline: none;
  margin: 5px;
}

第 5 步：安装react-hook-form库

npm install react-hook-form

第 6 步：从react-hook-form导入useForm钩子。它会返回你的register ， handlesubmit ， errors方法

• register：用于处理输入字段。稍后我们可以使用给定的名称访问输入字段。在上面的示例中，即“名字”。

• handleshubmit：用于处理表单提交。它需要一个自定义方法（例如： onSubmit ）。它将自动收集字段值。

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


     // input field 1
     // input field 2
     

• 错误：我们使用它来处理错误。如果我们将“firstname”字段留空，它将设置errors.first name = true

{errors.firstname && This field is required}

让我们使用所有概念并创建一个表单。将注册方法添加到每个输入字段并命名。还处理表单提交

应用程序.js

// inside src/App.js
// Replace previous code with this.
  
import React from "react";
import { useForm } from "react-hook-form";
import "./App.css";
  
function App() {
  const {register, handleSubmit, formState: { errors } } = useForm();
  
  const onSubmit = (data) => console.log(data);
    
  return (
    <>
      
Registration Form
  
      

        
        
        {errors.email && 
        *Email* is mandatory }
        
        
      
    
  );
}
export default App;

输出：

第 7 步：在 localStorage 中存储值：在构建登录表单时，我们需要验证登录凭据，以便将表单数据存储在本地存储中。有关本地存储的更多信息，请参阅本文。

const onSubmit = (data) => {
    localStorage.setItem(data.email, JSON.stringify({ 
        name: data.name, password: data.password 
    }));
    console.log(JSON.parse(localStorage.getItem(data.email)));
  };

localStorage提供setItem方法以字符串的键值对形式存储我们想要的任何内容。 getItem在key 的帮助下取回存储的数据。我们使用JSON.stringify()将我们的对象数据转换为字符串（ setItem只取值 字符串 )和JSON.parse()将字符串数据解析成 一个对象。

构建登录页面：在 src 文件夹中创建一个名为 Login.jsx 的新文件，并添加以下代码。我们从注册页面复制了代码并从中删除了名称字段。我们也更改了 onsubmit 方法代码。

登录.jsx

// inside src/Login.jsx
  
import React from "react";
import { useForm } from "react-hook-form";
import "./App.css";
  
function Login() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  
  const onSubmit = (data) => {
    const userData = JSON.parse(localStorage.getItem(data.email));
    if (userData) { // getItem can return actual value or null
      if (userData.password === data.password) {
        console.log(userData.name + " You Are Successfully Logged In");
      } else {
        console.log("Email or Password is not matching with our record");
      }
    } else {
      console.log("Email or Password is not matching with our record");
    }
  };
  return (
    <>
      
Login Form
  
      

        
        {errors.email && 
         *Email* is mandatory }
        
        
      
    
  );
}
export default Login;

输出：

结论：我们构建了一个基本的注册和登录页面。它可以在很多方面进行改进。除了添加验证、UI 元素、监控特定字段等之外，我们还可以更改许多其他方面。强烈建议您阅读他们的官方文档以获取更多详细信息。