使用React实现TodoList | 青训营

在这篇笔记中，将讲述如何使用React创建一个简单的TodoList应用。

步骤一：设置环境

在命令行中创建一个新的React应用程序：

npx create-react-app todolist-app
cd todolist-app
npm start

这将创建一个新的React应用程序并启动开发服务器。

步骤二：创建Todo组件

在src文件夹中，创建一个名为 Todo.js的文件。这将是我们TodoList的核心组件。

import React, { useState } from 'react';

function Todo() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const addTask = () => {
    if (newTask.trim() !== '') {
      setTasks([...tasks, newTask]);
      setNewTask('');
    }
  };

  const removeTask = (index) => {
    const updatedTasks = tasks.filter((_, i) => i !== index);
    setTasks(updatedTasks);
  };

  return (
    <div>
      <h2>Todo List</h2>
      <input
        type="text"
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
        placeholder="Enter a new task..."
      />
      <button onClick={addTask}>Add Task</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            {task}
            <button onClick={() => removeTask(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Todo;

步骤三：使用Todo组件

现在，我们需要在主应用程序中使用这个Todo组件。打开 src/App.js，然后进行如下修改：

import React from 'react';
import './App.css';
import Todo from './Todo';

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

export default App;

当然可以，在步骤三中添加编辑功能来修改现有的任务。以下是在步骤三的基础上如何添加编辑功能的修改。

步骤四：添加编辑功能

在src/Todo.js文件中，在每个任务旁边添加一个编辑按钮，并在点击编辑按钮时显示一个输入框，以便用户可以编辑任务。

// ...（之前的代码）

function Todo() {
  // ...（之前的代码）

  const [editingIndex, setEditingIndex] = useState(-1);
  const [editedTask, setEditedTask] = useState('');

  const editTask = (index, task) => {
    setEditingIndex(index);
    setEditedTask(task);
  };

  const saveEditedTask = (index) => {
    const updatedTasks = tasks.map((task, i) => (i === index ? editedTask : task));
    setTasks(updatedTasks);
    setEditingIndex(-1);
    setEditedTask('');
  };

  return (
    <div>
      <h2>Todo List</h2>
      <input
        type="text"
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
        placeholder="Enter a new task..."
      />
      <button onClick={addTask}>Add Task</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            {index === editingIndex ? (
              <>
                <input
                  type="text"
                  value={editedTask}
                  onChange={(e) => setEditedTask(e.target.value)}
                />
                <button onClick={() => saveEditedTask(index)}>Save</button>
              </>
            ) : (
              <>
                {task}
                <button onClick={() => removeTask(index)}>Remove</button>
                <button onClick={() => editTask(index, task)}>Edit</button>
              </>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Todo;

在这个修改后的代码中，我们添加了一个editingIndex状态，用于跟踪当前正在编辑的任务的索引。当点击编辑按钮时，我们设置editingIndex并显示一个可编辑的输入框，允许用户修改任务。点击“Save”按钮后，我们将更新任务列表，并重置编辑状态。

步骤五：样式化

为了美化我们的TodoList，您可以在 src/App.css中添加一些样式规则，使其看起来更漂亮。

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

input {
  padding: 0.5rem;
  margin-right: 1rem;
}

button {
  padding: 0.5rem 1rem;
  background-color: #007bff;
  border: none;
  color: white;
  cursor: pointer;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}

步骤六：运行应用

保存文件后，回到命令行运行 npm start。就可以在浏览器中看到一个简单的TodoList界面，可以添加、删除、编辑任务。