如何在 React 中创建表单？

React 使用表单来允许用户与网页进行交互。在 React 中，表单数据通常由组件处理。当数据由组件处理时，所有数据都存储在组件状态中。您可以通过在 onChange 属性中添加事件处理程序来控制更改，并且该事件处理程序将用于更新变量的状态。

设置步骤：

通过在命令提示符终端中写入“mkdir 文件夹名称”来创建一个文件夹。

mkdir forms

现在，通过在命令提示符终端中编写以下命令导航到表单的文件夹。

cd forms

通过在命令提示符窗口中编写 'npx create-react-app ' 创建一个 React 项目：

npx create-react-app form

现在，通过在命令提示符终端中编写以下命令导航到“表单”文件夹。

cd form

键入以下命令在浏览器 localhost 上运行您的项目：3000

npm start

示例：使用 React 创建一个注册表单，询问用户名、年龄、电子邮件、密码和确认密码。当用户单击“提交”按钮时，它将显示一个警告框，其中包含用户输入的用户名、年龄和电子邮件详细信息。

代码说明：

步骤 1：在函数组件“App”中，我们使用“useState”钩子初始化名称、电子邮件、密码，并确认密码状态为空值。

第 2 步：当用户在名称输入框中键入时，“handleChange()”函数将成为触发器，该触发器将在“setName”变量的帮助下更新名称变量的状态。

第 3 步：类似地，当用户在年龄输入框中键入时，'handleAgeChange()'函数将是触发器，将借助 'setAge' 变量更新年龄变量的状态。

第 4 步：类似地，当用户在电子邮件输入框中键入时，'handleEmailChange()'函数将是触发器，将借助 'setEmail' 变量更新电子邮件变量的状态。

第 5 步：类似地，当用户在密码输入框中键入时，'handlePasswordChange()'函数将是触发器，它将在 'setPassword' 变量的帮助下更新密码变量的状态。

第6步：同样，当用户在确认密码输入框中键入时，'handleConfPasswordChange()'函数将是触发器，它将在'setConfPassword'变量的帮助下更新confPassword变量的状态。

第七步：当用户提交表单时，会触发'handleSubmit()'函数，它会检查'password'和'confirm password'是否相同，如果密码相同，会显示一个警告框用户在表单中输入详细信息，如果密码不同，则会显示警告框，原因相同。

例子：

文件名：App.js

Javascript

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import './App.css';
 
function App() {
    const [name , setName] = useState('');
    const [age , setAge] = useState('');
    const [email , setEmail] = useState('');
    const [password , setPassword] = useState('');
    const [confPassword , setConfPassword] = useState('');
 
    // function to update state of name with
    // value enter by user in form
    const handleChange =(e)=>{
      setName(e.target.value);
    }
    // function to update state of age with value
    // enter by user in form
    const handleAgeChange =(e)=>{
      setAge(e.target.value);
    }
    // function to update state of email with value
    // enter by user in form
    const handleEmailChange =(e)=>{
      setEmail(e.target.value);
    }
      // function to update state of password with
      // value enter by user in form
    const handlePasswordChange =(e)=>{
      setPassword(e.target.value);
    }
      // function to update state of confirm password
      // with value enter by user in form
    const handleConfPasswordChange =(e)=>{
      setConfPassword(e.target.value);
    }
    // below function will be called when user
    // click on submit button .
    const handleSubmit=(e)=>{
      if(password!=confPassword)
      {
        // if 'password' and 'confirm password'
        // does not match.
        alert("password Not Match");
      }
      else{
        // display alert box with user
        // 'name' and 'email' details .
        alert('A form was submitted with Name :"' + name +
        '" ,Age :"'+age +'" and Email :"' + email + '"');
      }
      e.preventDefault();
 
    }
  return (
    

    

    
 {handleSubmit(e)}}>
     {/*when user submit the form , handleSubmit()
        function will be called .*/}
    
 Geeks For Geeks 
    
 Sign-up Form 
    
        
          Name:
        

         {handleChange(e)}} />

          { /*when user write in name input box , handleChange()
              function will be called. */}
        
          Age:
        

         {handleAgeChange(e)}} />

            { /*when user write in age input box , handleAgeChange()
               function will be called. */}
        
          Email:
        

         {handleEmailChange(e)}} />

          {/* when user write in email input box , handleEmailChange()
              function will be called.*/}
        
          Password:
        

         {handlePasswordChange(e)}} />

              {/* when user write in password input box ,
                  handlePasswordChange() function will be called.*/}
        
          Confirm Password:
        

         {handleConfPasswordChange(e)}} />

                {/* when user write in confirm password  input box ,
                    handleConfPasswordChange() function will be called.*/}
        
      
    
    
  );
}
 
export default App;

文件名：App.css，下面给出的文件包含 CSS 属性。此文件以 .css 扩展名保存。

CSS

.App {
   text-align: center;
}
form {
  border:2px solid green;
  padding: 30px;
}
img{
  height: 120px;
  margin-left: 90px;
  margin-bottom: 10px;
  display: block;
  border:1px solid black;
  border-radius: 50%;
}
.App-header {
  background-color: white;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: black;
}

输出：

当用户单击提交按钮时，它会显示一个警告框，其中包含用户在表单中输入的用户名、年龄和电子邮件详细信息：

整页视图：

当表单中的“密码”和“确认密码”不匹配时，它会显示一个警告框，并显示“密码不匹配”消息。

如果任何表单字段（姓名、年龄、密码和确认密码）为空，则 'required' 属性会阻止提交此表单：