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;
相关推荐
岁月宁静13 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
执沐13 小时前
基于HTML 使用星辰拼出爱心,并附带闪烁+流星+点击生成流星
前端·html
atwednesday13 小时前
日志处理
javascript
#做一个清醒的人13 小时前
【electron6】Web Audio + AudioWorklet PCM 实时采集噪音和模拟调试
前端·javascript·electron·pcm
拉不动的猪14 小时前
图文引用打包时的常见情景解析
前端·javascript·后端
浩男孩14 小时前
🍀继分页器组件后,封装了个抽屉组件
前端
Dolphin_海豚14 小时前
@vue/reactivity
前端·vue.js·面试
该用户已不存在14 小时前
程序员的噩梦,祖传代码该怎么下手?
前端·后端
namehu14 小时前
前端性能优化之:图片缩放 🚀
前端·性能优化·微信小程序
rit843249914 小时前
ES6 箭头函数:告别 `this` 的困扰
开发语言·javascript·es6