第3课：状态管理与事件处理

news2025/7/19 4:51:58

第3课：状态管理与事件处理

学习目标

  • 掌握useState Hook的使用
  • 理解组件事件处理机制
  • 实现表单输入与状态绑定
  • 完成任务添加功能原型

一、useState基础

1. 创建第一个状态

新建src/Counter.js：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <button onClick={() => setCount(count - 1)}>减少</button>
    </div>
  );
}

export default Counter;

import { useState } from "react";
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me+1</button>
        <button onClick={() => setCount(count - 1)}>Click me-1</button>
    </div>
  );
}
export default Counter;
// // import React from 'react'

关键点解析：

  • useState返回当前状态和更新函数
  • 状态更新会触发组件重新渲染
  • 永远不要直接修改状态，必须使用状态更新函数

2. 在App组件中使用

import Counter from './Counter';

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import HelloWorld from './HelloWorld.jsx'
import Introduction from './Introduction.jsx'
import JsxDemo from './JsxDemo.jsx'
import Greeting from './Greeting.jsx'
import InlineStyleDemo from './InlineStyleDemo.jsx'
import Card from './Card.jsx';
import TaskCard from './TaskCard.jsx'
import Counter from './Counter.jsx'

function App() {
  
  return (
    <>
      <div className='App'>
        <Counter />

      </div>
    </>
  )
}

export default App

在这里插入图片描述

二、表单处理基础

1. 受控组件实现

新建src/InputDemo.js：

import { useState } from 'react';

function InputDemo() {
  const [inputValue, setInputValue] = useState('');
  const [displayText, setDisplayText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    setDisplayText(inputValue);
    setInputValue('');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="输入内容..."
        />
        <button type="submit">提交</button>
      </form>
      {displayText && <p>你输入的内容是：{displayText}</p>}
    </div>
  );
}

export default InputDemo;

import { useState } from "react";
function InputDemo() {
  const [inputValue, setInputValue] = useState("");
  const [displayValue, setDisplayValue] = useState("");

  const handleChange = (event) => {
    event.preventDefault();
    setDisplayValue(inputValue);
    setInputValue('');
  };

  return (
    <div>
      <h1>Input Demo</h1>
      <form onSubmit={handleChange}>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="Type something..."
        />
        <button type="submit">Submit</button>
      </form>
        <p>You typed: {displayValue}</p>
    </div>
  );
}
export default InputDemo;
// // // import React from 'react'

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import HelloWorld from './HelloWorld.jsx'
import Introduction from './Introduction.jsx'
import JsxDemo from './JsxDemo.jsx'
import Greeting from './Greeting.jsx'
import InlineStyleDemo from './InlineStyleDemo.jsx'
import Card from './Card.jsx';
import TaskCard from './TaskCard.jsx'
import Counter from './Counter.jsx'
import InputDemo from './InputDemo.jsx'

function App() {
  
  return (
    <>
      <div className='App'>
        <InputDemo />
      </div>
    </>
  )
}

export default App

在这里插入图片描述

2. 多字段表单处理

function UserForm() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('表单数据：', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="username"
        value={formData.username}
        onChange={handleChange}
        placeholder="用户名"
      />
      <input
        name="email"
        type="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="邮箱"
      />
      <input
        name="password"
        type="password"
        value={formData.password}
        onChange={handleChange}
        placeholder="密码"
      />
      <button type="submit">注册</button>
    </form>
  );
}

import { useState } from "react";
function UserForm() {
    const [formData, setFormData] = useState({
        name: "",
        email: "",
        password: "",
        confirmPassword: "",
      });
      
      const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData((prevData) => ({
          ...prevData,
          [name]: value,
        }));
      };
      
      const handleSubmit = (e) => {
        e.preventDefault();
        console.log('The form data:',formData);
        // Perform form validation here
        // If validation passes, submit the form data
        // If validation fails, display error messages
      };
      
      return (
        <>
          <form onSubmit={handleSubmit}>
              <input name="username" 
              value={formData.username}
              onChange={handleChange}
              placeholder="Username"/>
              <input name="email"
              type="email"
              value={formData.email}
              onChange={handleChange}
              placeholder="Email"/>
              <input name="password"
              type="password"
              value={formData.password}
              onChange={handleChange}
              placeholder="Password"/>
              <input name="confirmPassword"
              type="password"
              value={formData.confirmPassword}
              onChange={handleChange}
              placeholder="Confirm Password"/>
              <button type="submit">Submit</button>
              
      
          </form>
          <p>Username: {formData.username}</p>
          </>
      );
}

export default UserForm;
// // // import React from 'react'


```bash
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import HelloWorld from './HelloWorld.jsx'
import Introduction from './Introduction.jsx'
import JsxDemo from './JsxDemo.jsx'
import Greeting from './Greeting.jsx'
import InlineStyleDemo from './InlineStyleDemo.jsx'
import Card from './Card.jsx';
import TaskCard from './TaskCard.jsx'
import Counter from './Counter.jsx'
import InputDemo from './InputDemo.jsx'
import UserForm from './UserForm.jsx'

function App() {
  
  return (
    <>
      <div className='App'>
        <UserForm />
      </div>
    </>
  )
}

export default App

在这里插入图片描述

  • 以下未验证，明天验证：

三、任务管理系统集成

1. 状态提升到App组件

修改App.js：

import { useState } from 'react';
import TaskCard from './TaskCard';

function App() {
  const [tasks, setTasks] = useState([
    { id: 1, text: '学习React基础', completed: false },
    { id: 2, text: '完成课后练习', completed: true }
  ]);

  return (
    <div className="App">
      <h1>任务管理系统</h1>
      <div className="task-list">
        {tasks.map(task => (
          <TaskCard
            key={task.id}
            title={task.text}
            completed={task.completed}
          />
        ))}
      </div>
    </div>
  );
}

2. 添加任务功能组件

新建src/AddTask.js：

import { useState } from 'react';

function AddTask({ onAddTask }) {
  const [newTask, setNewTask] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!newTask.trim()) return;
    
    onAddTask({
      id: Date.now(),
      text: newTask,
      completed: false
    });
    setNewTask('');
  };

  return (
    <form onSubmit={handleSubmit} className="add-task-form">
      <input
        type="text"
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
        placeholder="添加新任务..."
      />
      <button type="submit">添加</button>
    </form>
  );
}

export default AddTask;

3. 完整功能集成

更新App.js：

function App() {
  const [tasks, setTasks] = useState([
    { id: 1, text: '学习React基础', completed: false },
    { id: 2, text: '完成课后练习', completed: true }
  ]);

  const addTask = (newTask) => {
    setTasks([...tasks, newTask]);
  };

  const toggleTask = (taskId) => {
    setTasks(tasks.map(task =>
      task.id === taskId 
        ? { ...task, completed: !task.completed } 
        : task
    ));
  };

  return (
    <div className="App">
      <h1>任务管理系统</h1>
      <AddTask onAddTask={addTask} />
      <div className="task-list">
        {tasks.map(task => (
          <TaskCard
            key={task.id}
            title={task.text}
            completed={task.completed}
            onToggle={() => toggleTask(task.id)}
          />
        ))}
      </div>
    </div>
  );
}

更新TaskCard.js：

function TaskCard({ title, completed, onToggle }) {
  return (
    <div className={`task-card ${completed ? 'completed' : ''}`}>
      <h3>{title}</h3>
      <div className="task-actions">
        <button onClick={onToggle}>
          {completed ? '标记未完成' : '标记完成'}
        </button>
      </div>
    </div>
  );
}

四、样式优化

添加src/App.css：

.App {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.add-task-form {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.add-task-form input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.add-task-form button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-card {
  /* 原有样式基础上添加 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}

.task-actions button {
  padding: 6px 12px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.task-card.completed {
  opacity: 0.7;
}

五、练习任务

  1. 实现删除任务功能：

    • 为每个任务卡片添加删除按钮
    • 创建deleteTask方法
    • 使用filter方法更新状态

  2. 为添加任务表单添加验证：

    • 输入不能为空
    • 输入长度不能超过50字符
    • 显示实时字符计数

  3. （挑战）添加任务分类功能：

    • 添加选择器选择任务类型（工作/学习/生活）
    • 在任务卡片显示对应类型图标

六、常见问题解答

Q: 为什么状态更新后界面没有变化？
A: 检查是否：

  1. 正确使用了状态更新函数
  2. 状态值确实是新的（对于对象/数组需要创建新引用）
  3. 组件是否正确接收了props

Q: 如何处理多个状态？
A: 可以：

  1. 使用多个useState
  2. 合并相关状态到一个对象
  3. 当状态相互关联时，优先考虑合并

Q: 为什么表单提交后页面刷新？
A: 确保：

  1. 表单提交处理函数中有e.preventDefault()
  2. 按钮类型不是submit（如果不需要表单提交）

七、课程总结

今天我们掌握了：

  • useState Hook的基本用法
  • 表单事件处理流程
  • 组件间的状态传递
  • 实现了一个交互式的任务管理系统原型

课后作业

  1. 完成删除功能实现
  2. 为任务添加优先级属性（高/中/低）
  3. 尝试使用本地存储保存任务数据（提前预习下节课内容）

下一节课我们将学习列表渲染与条件渲染的进阶技巧！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2329246.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【速写】Transformer-encoder-decoder深度解析

【速写】Transformer-encoder-decoder深度解析

文章目录 一、理论分析1. Transformers概述2. Transformer的输入部分具体是如何构成&#xff1f;2.1 单词 Embedding2.2 位置 Embedding 3 自注意力原理3.1 自注意力结构3.2 QKV的计算3.3 自注意力的输出3.4 多头注意力 4 Encoder结构4.1 AddNorm4.2 前馈4.3 组成Encoder 二、代…
阅读更多...
MyBatis八股文-执行流程、延迟加载、一级与二级缓存

MyBatis八股文-执行流程、延迟加载、一级与二级缓存

(一)执行流程 mybatis-config.xml核心配置文件的作用&#xff1a; 在MyBatis框架的核心配置文件中需要去指定当前的环境配置、指定需要操作的是哪个数据库&#xff0c;并且输入当前的用户名与密码&#xff0c;只有配置了他才能真正操作数据库。同时还去加载了SQL映射文件&#…
阅读更多...
基于Spark的哔哩哔哩舆情数据分析系统

基于Spark的哔哩哔哩舆情数据分析系统

【Spark】基于Spark的哔哩哔哩舆情数据分析系统 &#xff08;完整系统源码开发笔记详细部署教程&#xff09;✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 本项目基于Python和Django框架进行开发&#xff0c;为了便于广大用户针对舆情进行个性化分析处…
阅读更多...
【Linux】日志模块实现详解

【Linux】日志模块实现详解

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;博客仓库&#xff1a;https://gitee.com/JohnKingW/linux_test/tree/master/lesson &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &…
阅读更多...
Java基础：面向对象高级（四）

Java基础：面向对象高级（四）

内部类&#xff08;类中五大成分之一&#xff09; 四种形式 成员内部类【了解】 静态内部类【了解】 局部内部类【了解】 匿名内部类【重点】 枚举 泛型 什么是泛型 泛型类-模拟ArrayList 泛型接口-操作学生&#xff0c;老师增删改查 泛型方法 泛型擦除和注意事项
阅读更多...
easy-poi 一对多导出

easy-poi 一对多导出

1. 需求&#xff1a; 某一列上下两行单元格A,B值一样且这两个单元格&#xff0c; 前面所有列对应单元格值一样的话&#xff0c; 就对A,B 两个单元格进行纵向合并单元格 1. 核心思路&#xff1a; 先对数据集的国家&#xff0c;省份&#xff0c;城市...... id 身份证进行排序…
阅读更多...
python通过调用海康SDK打开工业相机（全流程）

python通过调用海康SDK打开工业相机（全流程）

首先打开海康机器人-机器视觉-下载中心 下载最新版的 MVS 安装后打开目录找到 ...\MVS\Development\Samples\Python 将MvImport内所有文件拷贝至工作目录 然后到 C:\Program Files (x86)\Common Files\MVS\Runtime 找到适合自己系统的版本&#xff0c;将整个文件夹拷贝至工…
阅读更多...
manim,制作专业的数学公式动画

manim,制作专业的数学公式动画

manim是一个Python第三方库，全称是mathematical animation engine（数学动画引擎）。manim用于解说线性代数、微积分、神经网络、黎曼猜想、傅里叶变换以及四元数等数学概念。 manim使你能够以编程的方式创建精确的数学图形、动画和场景。与传统的几何画板等绘图软件不同，man…
阅读更多...
小刚说C语言刷题——第15讲 多分支结构

小刚说C语言刷题——第15讲 多分支结构

1.多分支结构 所谓多分支结构是指在选择的时候有多种选择。根据条件满足哪个分支&#xff0c;就走对应分支的语句。 2.语法格式 if(条件1) 语句1; else if(条件2) 语句2; else if(条件3) 语句3; ....... else 语句n; 3.示例代码 从键盘输入三条边的长度&#xff0c;…
阅读更多...
[ctfshow web入门] web6

[ctfshow web入门] web6

前置知识 入口点(目录)爆破 还记得之前说过网站的入口的吗&#xff0c;我们输入url/xxx&#xff0c;其中如果url/xxx存在&#xff0c;那么访问成功&#xff0c;证明存在这样一个入口点&#xff1b;如果访问失败则证明不存在此入口点。所以我们可以通过遍历url/xxx&#xff0c;…
阅读更多...
简单程序语言理论与编译技术·22 实现一个从AST到RISCV的编译器

简单程序语言理论与编译技术·22 实现一个从AST到RISCV的编译器

本文是记录专业课“程序语言理论与编译技术”的部分笔记。 LECTURE 22&#xff08;实现一个从AST到RISCV的编译器&#xff09; 一、问题分析 1、完整的编译器&#xff08;如LLVM&#xff09;需先完成AST到IR的转换&#xff0c;并进行代码优化&#xff0c;再到汇编&#xff0…
阅读更多...
lua和C的交互

lua和C的交互

1.C调用lua例子 #include <iostream> #include <lua.hpp>int main() {//用于创建一个新的lua虚拟机lua_State* L luaL_newstate();luaL_openlibs(L);//打开标准库/*if (luaL_dofile(L, "test.lua") ! LUA_OK) {std::cerr << "Lua error: &…
阅读更多...
Css：如何解决绝对定位子元素内容被父级元素overflow:hidden属性剪裁

Css：如何解决绝对定位子元素内容被父级元素overflow:hidden属性剪裁

一、问题描述 今天小伙伴提了一个bug&#xff0c;在点击列表项的“…”按钮应该出现的悬浮菜单显示不完整&#xff1a; 二、问题排查 一般这种问题&#xff0c;是由于悬浮菜单采用的是绝对定位&#xff0c;而父级采用了overflow:hidden属性。但需要注意的是&#xff0c;这里的…
阅读更多...
RoMo: Robust Motion Segmentation Improves Structure from Motion

RoMo: Robust Motion Segmentation Improves Structure from Motion

前言 看起来像是一篇投稿CVPR的文章&#xff0c;不知道被哪个瞎眼审稿人拒了。同期还有一篇CVPR被接收的工作Segment Any Motion in Videos&#xff0c;看起来不如这篇直白&#xff08;也可能是因为我先看过spotlesssplats的缘故&#xff09;&#xff0c;后面也应该一并介绍了…
阅读更多...
MCP 极简入门 - 三分钟 Cline + Smithery 运行 time 服务

MCP 极简入门 - 三分钟 Cline + Smithery 运行 time 服务

文章目录 一、&#x1f680; 初识Smithery&#xff1a;AI服务的新大陆找到心仪的服务 二、Cline 编辑配置文件&#x1f527;1、打开配置文件2. 添加Time Server配置3. 验证配置效果 三、&#x1f4ac; 实战对话&#xff1a;让AI告诉你时间四、服务管理小技巧&#x1f504;&…
阅读更多...
基本机动飞行性能

基本机动飞行性能

机动飞行时描述飞机在给定构型和发动机工作状态下改变飞行速度、飞行高度和飞行方向的能力 1. 水平加&#xff08;减&#xff09;速 水平加&#xff08;减&#xff09;速性能反映飞机在水平面内改变直线飞行速度的能力。描述水平加&#xff08;减&#xff09;速性能的参数包括…
阅读更多...
【Linux】进程间通信、匿名管道、进程池

【Linux】进程间通信、匿名管道、进程池

一.什么是通信 进程间通信(Inter-Process Communication&#xff0c;IPC),是指在操作系统中&#xff0c;不同进程之间进行数据交换和同步的机制。由于每个进程通常拥有独立的内存空间&#xff0c;进程间无法直接访问对方的内存&#xff0c;因此需要通过特定的机制来实现通信和…
阅读更多...
【MATLAB定位例程】TDOA（到达时间差）的chan-tylor，三维环境，附完整代码

【MATLAB定位例程】TDOA（到达时间差）的chan-tylor，三维环境，附完整代码

该代码实现了基于三维空间的动态目标TDOA定位，结合了Chan算法（解析解）与Taylor级数展开法（迭代优化）的双重优势。 文章目录 运行结果MATLAB代码代码讲解代码功能概述核心算法原理代码结构解析可视化与结果分析运行结果 定位示意图： 三轴状态曲线： 三轴误差曲线： MA…
阅读更多...
数字化转型中的开源AI智能客服与S2B2C商城小程序的融合创新

数字化转型中的开源AI智能客服与S2B2C商城小程序的融合创新

摘要 数字经济时代&#xff0c;企业需通过技术重构用户交互与供应链体系。本文以“开源AI智能客服”“AI智能名片”及“S2B2C商城小程序”为核心&#xff0c;研究三者如何通过技术协同与场景化应用实现企业营销、客户服务与供应链管理的智能化升级。通过案例分析、技术架构设…
阅读更多...
重生之我是去噪高手——diffusion model

重生之我是去噪高手——diffusion model

diffusion model是如何运作的&#xff1f; 想象一下&#xff0c;你有一张清晰的图片。扩散模型的核心思想分为两个过程&#xff1a; 前向过程&#xff08;Forward Process / Diffusion Process&#xff09;&#xff1a;逐步加噪反向过程&#xff08;Reverse Process / Denois…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023