这是一个简单的 React To-Do List 示例，用于展示如何使用 React 和其相关库创建一个待办事项列表。

功能概述

  • 添加任务：用户可以输入任务并添加到列表中。
  • 勾选任务：用户可以勾选已完成的任务。
  • 删除任务：用户可以删除任何任务。

示例代码

以下是一个简单的 To-Do List 组件的代码示例：

import React, { useState } from 'react';

function TodoList() {
  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>我的待办事项</h2>
      <input
        type="text"
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
        placeholder="添加新的任务"
      />
      <button onClick={addTask}>添加</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            {task}
            <button onClick={() => removeTask(index)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

扩展阅读

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

图片展示

React Logo

React_Logo

To-Do List 示例

To-Do_List_Example