待办事项列表是 React 应用程序中常见的功能，它可以帮助用户组织和管理日常任务。以下是一些关于如何创建一个 React 待办事项列表的教程。

教程步骤

  1. 设置项目结构：首先，你需要创建一个新的 React 应用程序。

    • 使用 create-react-app 来快速搭建项目框架。

  2. 添加状态管理：使用 React 的 useState 钩子来管理待办事项的状态。

    • 例如，你可以创建一个数组来存储待办事项。

  3. 创建待办事项表单：添加一个表单，允许用户输入新的待办事项，并将其添加到列表中。

    • 使用 onChange 和 onSubmit 事件来处理用户输入。

  4. 渲染待办事项列表：使用循环来渲染待办事项列表中的每一项。

    • 可以使用 map 方法来遍历数组并渲染每个待办事项。

  5. 处理待办事项的勾选和删除：添加勾选和删除功能，以便用户可以管理待办事项。

    • 通过添加按钮或复选框来允许用户勾选或删除待办事项。

示例代码

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const handleAddTodo = () => {
    if (newTodo.trim() !== '') {
      setTodos([...todos, newTodo]);
      setNewTodo('');
    }
  };

  const handleDeleteTodo = (index) => {
    const updatedTodos = todos.filter((_, i) => i !== index);
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h2>待办事项列表</h2>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        placeholder="添加待办事项"
      />
      <button onClick={handleAddTodo}>添加</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => handleDeleteTodo(index)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

扩展阅读

想要了解更多关于 React 的知识？请访问我们的 React 教程页面。

图片

待办事项列表示例