用Hooks优雅写一个 TodoList，一气呵成！

2023-10-17 04:32:28

前言

在React的世界里，Hooks是一个强大的工具，它可以帮助我们轻松地管理组件状态，构建交互式UI，以及处理各种异步操作。在这个教程中，我们将使用纯React Hooks来构建一个完整的TodoList应用程序，让你彻底掌握Hooks的用法。

搭建项目

首先，我们需要创建一个新的React应用程序。你可以使用create-react-app脚手架来快速搭建项目。在你的终端中输入以下命令：

npx create-react-app todo-app

安装完成后，进入项目目录：

cd todo-app

启动开发服务器：

npm start

创建TodoList组件

现在，让我们创建一个名为TodoList的组件。这个组件将负责管理任务列表和相关的操作。在src目录下创建一个名为TodoList.js的文件，并添加以下代码：

import React, { useState } from "react";

const TodoList = () => {
  const [tasks, setTasks] = useState([]);

  const addTask = (task) => {
    setTasks([...tasks, task]);
  };

  const removeTask = (index) => {
    const newTasks = [...tasks];
    newTasks.splice(index, 1);
    setTasks(newTasks);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            {task}
            <button onClick={() => removeTask(index)}>X</button>
          </li>
        ))}
      </ul>
      <input type="text" placeholder="Add a task" onKeyPress={(e) => {if (e.key === 'Enter') addTask(e.target.value)}}/>
    </div>
  );
};

export default TodoList;

使用TodoList组件

现在，我们在App.js文件中导入TodoList组件并使用它。修改App.js文件的内容如下：

import React from "react";
import TodoList from "./TodoList";

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

export default App;