使用react实现todolist
使用 React 实现 TodoList
创建 React 项目
通过 create-react-app 快速初始化项目：
npx create-react-app todo-list
cd todo-list
npm start组件结构设计
- App：根组件，管理状态（任务列表和输入框内容）。
- TodoList：展示任务列表，包含任务添加和删除功能。
- TodoItem：单个任务项，支持标记完成/未完成。
核心代码实现
App.js（状态管理）
import React, { useState } from 'react';
import TodoList from './TodoList';
function App() {
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');
const addTodo = () => {
if (inputValue.trim()) {
setTodos([...todos, { text: inputValue, completed: false }]);
setInputValue('');
}
};
const toggleTodo = (index) => {
const newTodos = todos.map((todo, i) =>
i === index ? { ...todo, completed: !todo.completed } : todo
);
setTodos(newTodos);
};
const deleteTodo = (index) => {
const newTodos = todos.filter((_, i) => i !== index);
setTodos(newTodos);
};
return (
<div>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="Add a task"
/>
<button onClick={addTodo}>Add</button>
<TodoList todos={todos} toggleTodo={toggleTodo} deleteTodo={deleteTodo} />
</div>
);
}
export default App;TodoList.js（列表渲染）
import React from 'react';
import TodoItem from './TodoItem';
function TodoList({ todos, toggleTodo, deleteTodo }) {
return (
<ul>
{todos.map((todo, index) => (
<TodoItem
key={index}
todo={todo}
index={index}
toggleTodo={toggleTodo}
deleteTodo={deleteTodo}
/>
))}
</ul>
);
}
export default TodoList;TodoItem.js（单个任务）
import React from 'react';
function TodoItem({ todo, index, toggleTodo, deleteTodo }) {
return (
<li style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
{todo.text}
<button onClick={() => toggleTodo(index)}>
{todo.completed ? 'Undo' : 'Complete'}
</button>
<button onClick={() => deleteTodo(index)}>Delete</button>
</li>
);
}
export default TodoItem;样式优化（可选）
在 App.css 中添加基础样式：
ul {
list-style: none;
padding: 0;
}
li {
margin: 8px 0;
}
button {
margin-left: 8px;
}功能扩展建议
- 本地存储：使用
localStorage持久化任务列表。 - 分类过滤：添加“全部/已完成/未完成”筛选功能。
- 动画效果：通过
react-transition-group实现任务添加/删除动画。
完整项目结构
src/
├── App.js
├── App.css
├── TodoList.js
├── TodoItem.js
└── index.js
