React 中的受控组件是由 React 组件管理其值的表单组件。它们的值受到 React 组件状态的控制，更新时会通过回调函数进行数据的处理。
受控组件的特点包括：
- 值由状态控制：受控组件的值是通过 React 组件的状态进行控制和更新的。
- 通过事件处理器更新值：受控组件通常配合事件处理函数（如
onChange）来更新状态中的值。 - 可以执行验证和处理逻辑：由于值受到状态的控制，你可以在事件处理器中执行验证和处理逻辑，并在状态更新后对值进行处理。
受控组件： 受到 React 状态控制的表单元素
react 文本框的 onChange 事件类似于原生的 input 事件（必须要加，否则报错）
react 对 change 事件做过处理文章来源：https://www.toymoban.com/news/detail-609180.html
基本使用：文章来源地址https://www.toymoban.com/news/detail-609180.html
import { useState } from "react";
const App = () => {
// 一个状态
const [value, setValue] = useState("");
const [checked, setChecked] = useState("");
return (
<div>
{/* 绑定 value 状态值和 onChange 属性 */}
<input value={value} onChange={(e) => setValue(e.target.value)}></input>
<button onClick={() => console.log(value)}>显示</button>
<button onClick={() => setValue("修改了值")}>修改</button>
{/* 单选框的使用 */}
<input
type="checkbox"
checked={checked}
onChange={(e) => setChecked(e.target.checked)}
/>
{checked ? "选中状态" : "未选中"}
</div>
);
};
export default App;
到了这里，关于React 中的受控组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
