弋阳网站建设制作_金湖网站建设公司_淘宝店铺如何推广_推广赚钱的软件

第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}><inputtype="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}><inputtype="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}><inputname="username"value={formData.username}onChange={handleChange}placeholder="用户名"/><inputname="email"type="email"value={formData.email}onChange={handleChange}placeholder="邮箱"/><inputname="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 => (<TaskCardkey={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"><inputtype="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 => (<TaskCardkey={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;
}