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

第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