控制组件的数据类型有哪些？

组件是 React 的核心构建块之一。换句话说，组件是一个 JavaScript函数，它接受输入（props）并返回一个 React 元素，表示 UI 的一部分应该看起来如何。

受控组件：表单数据由组件下的状态处理。当客户端/用户提交表单时，表单具有浏览到新页面的默认 HTML 表单行为。如果你需要在 React 中进行类似的操作，它可以工作。然而，作为一项规则，拥有一个处理表单调整并处理客户端/用户提交到表单中的信息的 JavaScript函数会很有帮助。完成此操作的标准方法是使用称为“受控组件”的程序。

为什么要使用受控组件：您需要为您的信息可以更改的每种方式编写一个事件处理程序，并通过 React 组件排列整个输入状态。

表单数据包括：

• 文本输入
• 数字输入
• 无线电输入
• 复选框输入
• 文本区域
• 选择

创建反应应用程序：

• 第 1 步：在终端/命令提示符下使用以下命令创建一个 React 应用程序：

  create-react-app foldername

• 第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

  cd foldername

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

示例 1：现在在 App.js 文件中写下以下代码。在这里，App 是我们编写代码的默认（父）组件。

App.js

import React, {Component}  from 'react';
  
class App extends React.Component {
  constructor(props) {
    super(props);
      
    this.onChange = this.onChange.bind(this);
      
    this.state = {
      name: ''
    };
  }
    
  onChange(e) {
    this.setState({
      name: e.target.value
    });
  }
    
  render() {
    return (
      

        Message for GFG: 
        
      
    )
  }
}
  
  
export default App;

上面的示例显示了 value 属性如何表征输入的当前值以及 onChange 事件处理程序如何使用客户端的信息/输入更新组件的状态。

输出：表单输入应该被描述为可以想象的受控组件。这保证了组件状态和输入值始终处于和谐状态，无论该值是否由客户端输入以外的触发器更改。

表单输入

示例 2：现在在 App.js 文件中写下以下代码。在这里，App 是我们编写代码的默认（父）组件。

应用程序.js

import React, { Component } from 'react';
  
class App extends Component {
    state = {
        message: ''
    }
    updateMessage = (newText) => {
        console.log(newText);
        this.setState(() => ({
            message: newText
        }));
    }
    render() {
        return (
            

                

                     this
                          .updateMessage(event.target.value)}
                    />
                    
Message for GFG: {this.state.message}
                
            
        );
    }
}
  
export default App;

输出：在此示例中，组件在页面上呈现一个文本框，并重复客户端在文本框中键入的任何内容。创建了一个状态对象，它包含一个名为message的属性。这是存储用户在给定文本框中输入的值的地方。此外，还声明了 onChange 事件处理程序以控制组件。

受控组件