React 中的受控组件

React 中的受控组件是由 React 组件管理其值的表单组件。它们的值受到 React 组件状态的控制,更新时会通过回调函数进行数据的处理。

受控组件的特点包括:

  1. 值由状态控制:受控组件的值是通过 React 组件的状态进行控制和更新的。
  2. 通过事件处理器更新值:受控组件通常配合事件处理函数(如 onChange)来更新状态中的值。
  3. 可以执行验证和处理逻辑:由于值受到状态的控制,你可以在事件处理器中执行验证和处理逻辑,并在状态更新后对值进行处理。

受控组件: 受到 React 状态控制的表单元素

react 文本框的 onChange 事件类似于原生的 input 事件(必须要加,否则报错)

react 对 change 事件做过处理

基本使用:

js 复制代码
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;
相关推荐
LaoZhangAI8 分钟前
【2025最新】Claude免费API完全指南:无需信用卡,中国用户也能用
前端
hepherd26 分钟前
Flask学习笔记 - 模板渲染
前端·flask
LaoZhangAI26 分钟前
【2025最新】Manus邀请码免费获取完全指南:5种稳定渠道+3个隐藏方法
前端
经常见28 分钟前
浅拷贝与深拷贝
前端
梅子酱~32 分钟前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
前端飞天猪33 分钟前
学习笔记:三行命令,免费申请https加密证书📃
前端
关二哥拉二胡34 分钟前
前端的 AI 应用开发系列二:手把手揭秘 RAG
前端·面试
斯~内克36 分钟前
前端图片加载性能优化全攻略:并发限制、预加载、懒加载与错误恢复策略
前端·性能优化
你的人类朋友36 分钟前
JS严格模式,启动!
javascript·后端·node.js
奇怪的知识又增长了1 小时前
Command SwiftCompile failed with a nonzero exit code Command SwiftGeneratePch em
前端