如何在 ReactJS 中开发用户注册表？

表单通常在传统 HTML 代码和 ReactJS 中的

标记内定义。它可以具有通常的表单提交行为，可以带到新页面，但不会充分利用 react 的潜力，相反，我们都知道它是使用 react 组件完成的。

方法：众所周知，React 以组件和钩子及其可重用性而闻名，我们将使用组件来创建表单。这个表单组件就像一个普通的 HTML 表单一样，可以有标签、输入字段、文本区域、单选按钮、复选框等。除此之外，它还可以有不同的属性，只需稍加修改，即“for”属性被“ htmlfor”，“class”被“className”替换。它仍然可以有一些旧的做法，例如“价值”属性仍然存在。

由于我们拥有 React 的优势，我们将通过创建不同的方法来处理表单，即处理表单任何字段的更改，当点击提交按钮时会有一个方法，同样会有一个方法.

我们不会将表单接收到的值保存在普通的 JavaScript 变量中，而是使用强大的反应钩子。即 useState 钩子。为此，首先让我们看看如何将这个 useState 钩子与表单一起使用。

使用 useState 和表单数据：每个组件都可以有自己的状态，这些状态可以使用钩子 useState 更新，效果将通过组件反映。

这里，“name”被指定为状态变量，它的初始值为“GFG”。我们还提供了onChange属性，用于指定每当输入字段的值发生更改时应执行的方法，我们已将其设置为尚未定义的handleChange ，如下所示。

Javascript

import React,{useState} from 'react'
 
export default function test() {
 
    const [name, setName] = useState("GFG");
     
    // HandleChange method to update the states
    const handleChange = () => ();
     
    return (
        

            
                
            
        
    )
}

示例：现在，让我们通过创建用户表单来扩展我们对 useState 钩子的理解，该表单将以姓名、电子邮件和密码作为输入。它将有一个提交按钮来处理提交。我们还将验证字段，如果任何一个字段为空，我们将显示错误消息，否则我们将向用户显示成功消息。

创建 React 应用程序：使用以下命令创建一个 React 应用程序。

npx create-react-app yourappname

项目目录：然后在你的“src”文件夹中删除 App.css 和 App.js 文件的内容，并创建一个名为 Form.js 的文件，最后，你的项目结构将如下所示。

项目结构

文件名：App.css这个文件包含了我们在这个例子中需要的所有 CSS，它不仅不言自明，而且超出了本文的范围。虽然在这里给出供您参考。

CSS

.App {
  text-align: center;
  background-color:green;
}
 
.label{
  display: block;
  font-size: larger;
  color: white;
  padding: 5px;
}
 
.input{
  font-size: larger;
  padding: 5px;
  margin: 2px;
  
}
.btn{
  color: white;
  background-color: red;
  border-radius: 5px;
  font-size: larger;
  display: block;
  padding: 5px;
  margin: 10px auto;
}
 
.messages{
  display: flex;
  justify-content: center;
}
 
.error{
  display: block;
  background-color: red;
  color: white;
  width: fit-content;
  height: 50px;
  padding: 5px;
}
 
.success{
  display: block;
  background-color: lightblue;
  color: black;
  width: fit-content;
  height: 50px;
  padding: 5px;
}

文件名：App.js这个 App.js 是 React 默认在 index.js 文件中渲染的文件，我们不会触及 index.js 文件，而是我们制作的所有组件都将在其中渲染App.js 如下图所示。

Javascript

import './App.css';
import Form from "./Form"
 
function App() {
  return (
    

      

    
     
  );
}
 
export default App;

文件名：Form.js该文件包含我们表单的所有必要组件和功能。首先，我们从 react 中导入了 useState。然后我们导出了具有所有状态和方法的表单组件。

我们已经为保存表单数据的姓名、电子邮件和密码定义了状态。我们还有一些其他状态，例如表单功能的提交和错误。然后，我们定义了用于更新状态的 handleName、handleEmail、handlePassword 方法。

之后，我们就有了一种处理表单提交的方法。它正在检查任何一个字段是否为空，将错误设置为真，否则，将成功设置为真。然后我们定义了一条成功消息，只有在成功设置为 true 时才会显示。然后我们有一条错误消息，仅当错误设置为 true 时才会显示。

然后我们返回组件，首先，我们有一个 h1 来保存表单的标题。然后我们有一个部门来保存successMessage() 和errorMessage()。最后是保持形式的划分。它具有通常的标签和输入字段。 onChange 给出它们各自的方法和它们的值以将它们与状态相关联。

注意：状态只能使用 set 方法更新，如方法中所示。

Javascript

import { useState } from 'react';
 
export default function Form() {
 
  // States for registration
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
 
  // States for checking the errors
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState(false);
 
  // Handling the name change
  const handleName = (e) => {
    setName(e.target.value);
    setSubmitted(false);
  };
 
  // Handling the email change
  const handleEmail = (e) => {
    setEmail(e.target.value);
    setSubmitted(false);
  };
 
  // Handling the password change
  const handlePassword = (e) => {
    setPassword(e.target.value);
    setSubmitted(false);
  };
 
  // Handling the form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    if (name === '' || email === '' || password === '') {
      setError(true);
    } else {
      setSubmitted(true);
      setError(false);
    }
  };
 
  // Showing success message
  const successMessage = () => {
    return (
      

        
User {name} successfully registered!!
      
    );
  };
 
  // Showing error message if error is true
  const errorMessage = () => {
    return (
      

        
Please enter all the fields
      
    );
  };
 
  return (
    

      

        
User Registration
      
 
      {/* Calling to the methods */}
      

        {errorMessage()}
        {successMessage()}
      
 
      
        {/* Labels and inputs for form data */}
        Name
        
 
        Email
        
 
        Password
        
 
        
          Submit
        
      
    
  );
}

使用以下命令运行应用程序：

npm start

输出：

输出

参考资料： https://reactjs.org/docs/forms.html