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;
相关推荐
社恐的下水道蟑螂17 小时前
LangChain 进阶实战:从玩具 Demo 到生产级 AI 应用(JS/TS 全栈版)
前端·langchain·openai
Fairy要carry17 小时前
项目01-手搓Agent之loop
前端·javascript·python
亲亲小宝宝鸭17 小时前
Ctrl ACV工程师的提效之路:删掉项目中的冗余
前端
kyriewen17 小时前
DOM树与节点操作:用JS给网页“动手术”
前端·javascript·面试
米饭同学i17 小时前
基于腾讯云COS的小程序素材上传功能实现
前端·javascript·react.js
cxxcode17 小时前
前端性能指标接入 Prometheus 技术方案
前端
辣椒炒代码17 小时前
🚀 AI Agent 入门实战:基于 LangChain + MCP 构建智能导游助手
前端
ruanCat17 小时前
前端工程化工具链从零配置:simple-git-hooks + lint-staged + commitlint
前端·git·代码规范
光影少年17 小时前
如何开发一个CLI工具?
javascript·测试工具·前端框架·node.js
哈__18 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-fingerprint-scanner
javascript·react native·react.js