实践笔记：React 待办事项列表应用

需求分析

我们需要使用 React 创建一个简单的待办事项列表应用，满足以下功能要求：

1. 用户可以添加新的待办事项。
2. 用户可以编辑已有的待办事项。
3. 用户可以删除不需要的待办事项。

软件设计

为了实现这个待办事项列表应用，我们将创建以下组件：

1. App 组件：应用的根组件，用于渲染整个应用界面。
2. TodoList 组件：用于显示待办事项列表，包括每个待办事项的内容和操作按钮。
3. TodoItem 组件：表示单个待办事项，包括文本内容和编辑/删除按钮。
4. TodoForm 组件：用于添加新的待办事项。

编码

首先，我们需要设置好 React 环境，并安装所需的依赖。然后，我们可以按照以下步骤进行编码：

1. 创建 App 组件

jsxCopy code
import React, { useState } from 'react';
import TodoList from './TodoList';
import TodoForm from './TodoForm';

function App() {
  const [todos, setTodos] = useState([]);

  const addTodo = (text) => {
    const newTodo = { id: Date.now(), text };
    setTodos([...todos, newTodo]);
  };

  const editTodo = (id, newText) => {
    const updatedTodos = todos.map(todo =>
      todo.id === id ? { ...todo, text: newText } : todo
    );
    setTodos(updatedTodos);
  };

  const deleteTodo = (id) => {
    const filteredTodos = todos.filter(todo => todo.id !== id);
    setTodos(filteredTodos);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <TodoForm addTodo={addTodo} />
      <TodoList todos={todos} editTodo={editTodo} deleteTodo={deleteTodo} />
    </div>
  );
}

export default App;

2. 创建 TodoList 组件

jsxCopy code
import React from 'react';
import TodoItem from './TodoItem';

function TodoList({ todos, editTodo, deleteTodo }) {
  return (
    <ul>
      {todos.map(todo => (
        <TodoItem
          key={todo.id}
          todo={todo}
          editTodo={editTodo}
          deleteTodo={deleteTodo}
        />
      ))}
    </ul>
  );
}

export default TodoList;

3. 创建 TodoItem 组件

jsxCopy code
import React, { useState } from 'react';

function TodoItem({ todo, editTodo, deleteTodo }) {
  const [isEditing, setIsEditing] = useState(false);
  const [editedText, setEditedText] = useState(todo.text);

  const handleEditClick = () => {
    setIsEditing(true);
  };

  const handleSaveClick = () => {
    editTodo(todo.id, editedText);
    setIsEditing(false);
  };

  const handleDeleteClick = () => {
    deleteTodo(todo.id);
  };

  return (
    <li>
      {isEditing ? (
        <div>
          <input
            type="text"
            value={editedText}
            onChange={e => setEditedText(e.target.value)}
          />
          <button onClick={handleSaveClick}>Save</button>
        </div>
      ) : (
        <div>
          <span>{todo.text}</span>
          <button onClick={handleEditClick}>Edit</button>
          <button onClick={handleDeleteClick}>Delete</button>
        </div>
      )}
    </li>
  );
}

export default TodoItem;

4. 创建 TodoForm 组件

jsxCopy code
import React, { useState } from 'react';

function TodoForm({ addTodo }) {
  const [newTodoText, setNewTodoText] = useState('');

  const handleInputChange = (e) => {
    setNewTodoText(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (newTodoText.trim()) {
      addTodo(newTodoText);
      setNewTodoText('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Enter a new todo"
        value={newTodoText}
        onChange={handleInputChange}
      />
      <button type="submit">Add</button>
    </form>
  );
}

export default TodoForm;

测试

在完成上述编码后，我们可以通过运行应用并进行测试来确保它的功能正常。可以尝试以下操作：

1. 添加新的待办事项。
2. 编辑已有的待办事项。
3. 删除不需要的待办事项。

通过这些操作，我们可以验证应用是否按照需求正常工作。

结论

通过按照需求分析、软件设计、编码和测试的步骤，我们成功地创建了一个简单的 React 待办事项列表应用。这个过程展示了如何使用 React 组件来构建一个具有基本功能的应用。根据项目的规模和需求，我们可以进一步优化和扩展这个应用。