ReactJS 中的表单是如何创建的？

表单是使用交互式控件在 Web 服务器上存储用户信息的文档。表单包含不同类型的信息，例如用户名、密码、联系电话、电子邮件 ID 等。表单是网站非常重要的组成部分。因为它可以直接从用户那里收集数据，从而使网站更具交互性。如果我们保持简单并且只制作一个静态表单，那么在 React 中创建表单几乎与 HTML 相似。但是在处理数据和检索表单提交时会出现很多差异。

受控组件：在简单的 HTML 元素（如输入标签）中，输入字段的值会在用户键入时更改。但是，在 React 中，无论用户输入什么值，我们都将其保存在 state 中，并将相同的值作为它的值传递给 input 标签，因此这里它的值不会被 DOM 更改，它由 react state 控制。

创建反应应用程序：

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

npx create-react-app name_of_the_app

第 2 步：创建反应应用程序后，使用以下命令根据您的应用程序名称移动到目录：

cd name_of_the_app

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

现在让我们用不同的例子来理解。

示例 1：在此示例中，我们将在 App.js 文件的 App 组件内创建一个简单的表单组件。这只是一个静态表单，它不包含任何类型的动态处理和事件处理，因此该表单是基本表单，不满足我们的要求。

应用程序.js

Javascript

import React from 'react';
import './App.css';
  
function App() {
  
  return (
    

      

        Input
        
      
      

        Textarea
        
      
      

        Submit
      
    
  );
}
  
export default App;

输出：

示例 2：在此示例中，我们将把输入框中的值打印到控制台日志中。为此，我们必须执行以下操作：

• 创建一个名为 'detectChange' 的新函数。此函数将打印目标 JSX 元素的值。
• 在“onChange”事件中调用此函数。
• 这将在输入框更改时打印输入框的值。

应用程序.js

Javascript

import React from 'react';
import './App.css';
  
function App() {
  
  function detectChange(e){
    console.log(e.target.value)
  }
  
  return (
    

      

        Input :
        
      
      

        Submit
      
    
  );
}
  
export default App;

输出：

示例 3：在此示例中，我们将使用反应状态将输入框中的值渲染到同一组件内的另一个 DOM 元素。在 App.js 的 App 组件内部

• 使用空字符串的值创建 inputValue 状态。
• 设置输入框的value属性等于inputValue状态..
• 每当输入框内发生更改时，使用 setState() 方法更新 inputValue 状态。
• 将“输入值：”之后的文本设置为等于 inputValue 状态。

应用程序.js

Javascript

import React from 'react';
class App extends React.Component {
      
    state = { inputValue: '' };
    render() {
        return (
        

            

                 Input 
                 this.setState(
                    { inputValue: e.target.value })}/>
            
            

                Entered Value: {this.state.inputValue}
            
         
        );
    }
}
  
export default App;

输出 ：