React待办事项列表实践指南 | 青训营

35 阅读2分钟

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. 进一步拓展

  1. 过滤功能: 添加一个功能,可以过滤已完成和未完成的待办事项。
  2. 排序: 允许用户根据创建时间或字母顺序对待办事项进行排序。
  3. 使用Redux: 对于更复杂的应用,考虑引入Redux进行状态管理。
  4. 使用路由: 当应用变得复杂时,考虑引入React Router为应用添加导航功能。

8. 总结

React是一个强大且灵活的前端框架,允许我们轻松地创建和维护应用。本文提供了一个简单的待办事项应用作为示例,但React的真正潜力远非如此。深入学习React可以开启前端开发的新境界。