React中的受控组件示例

开发者小天2025-12-06 9:43

javascript 复制代码

/**
 * Edit 组件
 * 一个简单的受控输入框组件，用于演示 useState 和事件处理
 */

// 1. 导入 React 核心功能和类型定义
import React, { useState, type FC } from "react";

/**
 * 定义 Edit 组件
 * 使用泛型 FC (FunctionComponent) 来明确这是一个函数组件
 */
const Edit: FC = () => {
  // 2. 状态定义 (State Declaration)
  // 创建一个名为 text 的状态变量，初始值为空字符串
  // setText 是用于更新该状态的函数
  // 使用泛型 <string> 明确 state 的类型为字符串
  const [text, setText] = useState<string>('');

  /**
   * 3. 事件处理函数 (Event Handler)
   * 处理输入框的 onChange 事件
   * 
   * @param event - React 的 ChangeEvent 对象，泛型指定了目标元素类型为 HTMLInputElement
   */
  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    // 从事件对象中提取输入框的最新值
    const newValue = event.target.value;
    
    // 更新 React 状态
    // 这会触发组件的重新渲染，使视图与状态保持同步
    setText(newValue);

    // 控制台调试输出，用于开发时查看实时值
    console.log('输入框的值:', newValue);
  }

  // 4. JSX 渲染 (Render)
  // 返回组件的 UI 结构
  return (
    <div>
      <h1>Edit</h1>
      
      {/* 
        输入框 (Input Field)
        - value 属性绑定到 state 变量 `text`，使其成为"受控组件"
        - onChange 监听输入变化，触发 handleChange 函数
      */}
      <input 
        type="text" 
        onChange={handleChange} 
        value={text} 
      />
      
      {/* 显示当前状态的值 */}
      <p>输入的值是: {text}</p>
    </div>
  );
}

export default Edit;

📝 代码逻辑简述

受控组件模式 ：这个输入框是一个受控组件 。这意味着输入框显示的值完全由 React 的状态 (text) 控制，而不是由 DOM 自己维护。用户每一次按键，都会触发 onChange，进而通过 setText 更新状态，状态更新后组件重新渲染，输入框显示新值。

双向绑定 ：value={text} (读取) 和 onChange={handleChange} (写入) 共同实现了数据的双向绑定。

类型安全 ：使用 React.ChangeEvent<HTMLInputElement> 确保了在 TypeScript 下，event.target.value 能够被正确识别，避免类型错误。