React待办事项列表实践指南
待办事项列表是学习框架和库的一个经典案例。本文将指导你如何使用React实现一个简单的待办事项列表,用户可以添加、编辑和删除待办事项。
1. 新建React项目
bash Copy code npx create-react-app todo-app cd todo-app
2. 创建Todo组件
我们首先创建一个简单的Todo组件,用于显示每个待办事项。
TodoItem.js
import React, { useState } from 'react';
const TodoItem = ({ todo, updateTodo, deleteTodo }) => {
const [isEditing, setIsEditing] = useState(false);
const [editText, setEditText] = useState(todo.text);
const handleUpdate = () => {
updateTodo(todo.id, editText);
setIsEditing(false);
};
return (
<li>
{isEditing ? (
<>
<input value={editText} onChange={e => setEditText(e.target.value)} />
<button onClick={handleUpdate}>Update</button>
<button onClick={() => setIsEditing(false)}>Cancel</button>
</>
) : (
<>
{todo.text}
<button onClick={() => setIsEditing(true)}>Edit</button>
<button onClick={() => deleteTodo(todo.id)}>Delete</button>
</>
)}
</li>
);
};
export default TodoItem;
3. 创建TodoList组件
这个组件用于管理待办事项的状态,并提供添加、编辑和删除功能。
TodoList.js
import React, { useState } from 'react';
import TodoItem from './TodoItem';
const TodoList = () => {
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');
const addTodo = () => {
if (inputValue) {
setTodos([...todos, { id: Date.now(), text: inputValue }]);
setInputValue('');
}
};
const updateTodo = (id, text) => {
setTodos(todos.map(todo =>
todo.id === id ? { ...todo, text } : todo
));
};
const deleteTodo = (id) => {
setTodos(todos.filter(todo => todo.id !== id));
};
return (
<div>
<input value={inputValue} onChange={e => setInputValue(e.target.value)} />
<button onClick={addTodo}>Add</button>
<ul>
{todos.map(todo => (
<TodoItem key={todo.id} todo={todo} updateTodo={updateTodo} deleteTodo={deleteTodo} />
))}
</ul>
</div>
);
};
export default TodoList;
4. 整合到App中
App.js
import React from 'react';
import './App.css';
import TodoList from './TodoList';
function App() {
return (
<div className="App">
<h1>Todo App</h1>
<TodoList />
</div>
);
}
export default App;
5. 样式增强
为了让我们的待办事项应用看起来更加美观,我们可以添加一些基本的CSS样式。
App.css
cssCopy code
.App {
font-family: 'Arial', sans-serif;
max-width: 600px;
margin: 50px auto;
padding: 20px;
border: 1px solid #eee;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
button {
margin-left: 10px;
padding: 5px 15px;
cursor: pointer;
}
input {
padding: 5px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px 0;
border-bottom: 1px solid #eee;
}
li:last-child {
border-bottom: none;
}
6. 数据持久化
为了避免每次刷新页面后数据丢失,我们可以使用浏览器的localStorage
来持久化待办事项数据。
更新TodoList.js
:
javascriptCopy code
// 在useState处初始化todos
const [todos, setTodos] = useState(() => {
const savedTodos = localStorage.getItem('todos');
if (savedTodos) {
return JSON.parse(savedTodos);
} else {
return [];
}
});
// 使用useEffect来监听todos变化,并存储到localStorage
useEffect(() => {
localStorage.setItem('todos', JSON.stringify(todos));
}, [todos]);
现在,即使刷新页面,待办事项数据也会被保存并在下次加载时恢复。
7. 进一步拓展
- 过滤功能: 添加一个功能,可以过滤已完成和未完成的待办事项。
- 排序: 允许用户根据创建时间或字母顺序对待办事项进行排序。
- 使用Redux: 对于更复杂的应用,考虑引入Redux进行状态管理。
- 使用路由: 当应用变得复杂时,考虑引入React Router为应用添加导航功能。
8. 总结
React是一个强大且灵活的前端框架,允许我们轻松地创建和维护应用。本文提供了一个简单的待办事项应用作为示例,但React的真正潜力远非如此。深入学习React可以开启前端开发的新境界。