使用 React 实现待办事项列表应用

在本示例中，我们将使用 React 来创建一个简单的待办事项列表应用。用户可以添加、编辑和删除待办事项的笔记。

项目设置

首先，确保你已经安装了 Node.js 和 npm（Node Package Manager）。然后，你可以使用以下命令来创建一个新的 React 应用：

bashCopy code
npx create-react-app todo-list-app
cd todo-list-app

创建组件

我们将创建几个组件来构建我们的待办事项列表应用：

1. TodoList 组件

这个组件将渲染整个待办事项列表。

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

function TodoList() {
  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 updatedTodos = todos.filter((todo) => todo.id !== id);
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h2>待办事项列表</h2>
      <ul>
        {todos.map((todo) => (
          <TodoItem
            key={todo.id}
            todo={todo}
            onEdit={editTodo}
            onDelete={deleteTodo}
          />
        ))}
      </ul>
      <TodoForm onAdd={addTodo} />
    </div>
  );
}

export default TodoList;

2. TodoItem 组件

这个组件渲染单个待办事项，并提供编辑和删除选项。

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

function TodoItem({ todo, onEdit, onDelete }) {
  const [isEditing, setIsEditing] = useState(false);
  const [text, setText] = useState(todo.text);

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

  const handleSave = () => {
    onEdit(todo.id, text);
    setIsEditing(false);
  };

  const handleDelete = () => {
    onDelete(todo.id);
  };

  return (
    <li>
      {isEditing ? (
        <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      ) : (
        <span>{todo.text}</span>
      )}
      {isEditing ? (
        <button onClick={handleSave}>保存</button>
      ) : (
        <button onClick={handleEdit}>编辑</button>
      )}
      <button onClick={handleDelete}>删除</button>
    </li>
  );
}

export default TodoItem;

3. TodoForm 组件

这个组件提供一个输入框，用户可以添加新的待办事项。

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

function TodoForm({ onAdd }) {
  const [text, setText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (text.trim() !== '') {
      onAdd(text);
      setText('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="添加待办事项"
      />
      <button type="submit">添加</button>
    </form>
  );
}

export default TodoForm;

集成组件

在 src 目录下，分别创建上述组件的文件，并将它们组合在一起：

jsxCopy code
// src/App.js
import React from 'react';
import TodoList from './TodoList';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <TodoList />
      </header>
    </div>
  );
}

export default App;

运行应用

使用以下命令启动应用：

bashCopy code
npm start

使用 React 实现待办事项列表应用｜青训营