用React创建待办事项清单，轻松管理生活和工作

见解分享

2023-02-05 21:51:59

如何使用 React 创建待办事项清单：循序渐进指南

简介

待办事项清单对于保持井然有序并提高工作效率至关重要。React 是一种强大的前端框架，可以轻松创建交互式用户界面。本文将详细介绍如何使用 React 构建一个简单的待办事项清单，从头开始。

创建 React 项目

安装 create-react-app：npm install -g create-react-app
创建新项目：create-react-app my-todo-app
进入项目目录并启动服务器：cd my-todo-app && npm start

构建 TodoList 组件

创建 TodoList.js 组件：touch src/TodoList.js
添加以下代码：

import React, { useState } from "react";

const TodoList = () => {
  // 初始化待办事项数组
  const [todos, setTodos] = useState([]);

  // 添加新待办事项
  const addTodo = (text) => {
    const newTodos = [...todos, { text, completed: false }];
    setTodos(newTodos);
  };

  // 删除待办事项
  const removeTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  // 切换待办事项完成状态
  const toggleTodo = (index) => {
    const newTodos = [...todos];
    newTodos[index].completed = !newTodos[index].completed;
    setTodos(newTodos);
  };

  return (
    <div>
      <input type="text" placeholder="添加待办事项" onKeyPress={(e) => { if (e.key === 'Enter') { addTodo(e.target.value) } }} />
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            <input type="checkbox" checked={todo.completed} onChange={() => { toggleTodo(index) }} />
            <span>{todo.text}</span>
            <button onClick={() => { removeTodo(index) }}>X</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

导入和使用 TodoList 组件

在 App.js 中导入 TodoList：import TodoList from "./TodoList";
在 App.js 中使用 TodoList：

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

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

export default App;