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;
相关推荐
牧羊狼的狼1 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手3 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one3 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲3 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell3 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830945 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮5 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel5 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip6 小时前
JavaScript事件流
前端·javascript
小菜全6 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json