ReactJS 中的受控组件是什么？

在 React 中，受控组件是那些表单数据由组件状态处理的组件。它通过 props 获取当前值，并通过 onClick、onChange 等回调进行更改。父组件管理自己的状态并将新值作为 props 传递给受控组件。

在表单元素中，要么是类型化的，比如 textarea。输入或选定的单选按钮或复选框，只要有任何更改，都会通过一些更新状态的功能进行相应的更新。

先决条件：

关于 reactJs 的知识。
react hooks相关知识

创建反应应用程序：

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

npm create-react-app project

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

cd project

项目结构：它看起来像这样。

示例：我们正在创建一个包含输入字段名称和提交按钮的简单表单。我们使用 react hook useState 来维护我们的两个状态 showName 和 name ，它们分别存储一个布尔值和一个字符串。

我们正在创建一个名为 handleSubmit 的 onClick函数，它防止提交按钮的默认行为并将 showName 设置为 true。单击按钮后，即提交我们的表单，我们将显示我们输入的名称。

App.js

import { useState } from 'react';
  
function App() {
  const [name, setName] = useState('');
  const [showName, setShowName] = useState(false);
  
  function handleSubmit(e) {
    e.preventDefault();
    setShowName(true);
  }
    
  return (
    
      
        Name:
         setName(e.target.value)} />
        
      
      {/* Checks the condition if showName is 
      true, which will be true only if 
      we click on the submit button */}
      {showName === true && 
      You have submitted. Name: {name}}
    
  );
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：

参考： https://reactjs.org/docs/forms.html#control-components