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;
相关推荐
恋猫de小郭6 小时前
AGENTS.md 真的对 AI Coding 有用吗?或许在此之前你没用对?
前端·人工智能·ai编程
sunny_8 小时前
构建工具的第三次革命:从 Rollup 到 Rust Bundler,我是如何设计 robuild 的
前端·rust·前端工程化
rfidunion9 小时前
springboot+VUE+部署(12。Nginx和前端配置遇到的问题)
前端·vue.js·spring boot
珹洺9 小时前
Java-servlet(五)手把手教你利用Servlet配置HTML请求与相应
java·运维·服务器·前端·servlet·html·maven
FYKJ_20109 小时前
springboot大学校园论坛管理系统--附源码42669
java·javascript·spring boot·python·spark·django·php
QQ24391979 小时前
语言在线考试与学习交流网页平台信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·spring boot·sql·学习·java-ee
范特西.i10 小时前
QT聊天项目(6)
前端
a11177610 小时前
水体渲染系统(html开源)
前端·开源·threejs·水体渲染
程序员小李白10 小时前
CSS 盒子模型
前端·css·html
Zzz不能停10 小时前
单行 / 多行文本显示省略号(CSS 实现)
前端·css