一个简单的待办事项

使用React实现一个简单的待办事项列表，我们可以使用函数组件和React的状态管理来实现。

首先，我们需要创建一个新的React应用并安装所需的依赖项。在终端中运行以下命令：

npx create-react-app todo-list-app
cd todo-list-app
npm install

然后，我们在src目录下创建一个名为TodoList.js的新文件，并在其中编写以下代码：

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]); // 创建状态 todos

  // 添加待办事项
  const addTodo = (event) => {
    event.preventDefault();
    const todoText = event.target.todoText.value;
    if (todoText.trim() !== '') {
      const newTodo = {
        id: Date.now(),
        text: todoText,
      };
      setTodos([...todos, newTodo]);
      event.target.reset();
    }
  };

  // 编辑待办事项
  const editTodo = (id, newText) => {
    const updatedTodos = todos.map((todo) => {
      if (todo.id === id) {
        return {
          ...todo,
          text: newText,
        };
      }
      return todo;
    });
    setTodos(updatedTodos);
  };

  // 删除待办事项
  const deleteTodo = (id) => {
    const updatedTodos = todos.filter((todo) => todo.id !== id);
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <form onSubmit={addTodo}>
        <input type="text" name="todoText" placeholder="Add a new todo..." />
        <button type="submit">Add</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <input
              type="text"
              defaultValue={todo.text}
              onChange={(event) => editTodo(todo.id, event.target.value)}
            />
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

在上面的代码中，我们首先引入了React和useState钩子函数。然后，我们创建了一个名为TodoList的函数组件，并使用useState创建了一个名为todos的状态和一个名为setTodos的函数来更新todos状态。

在组件中，我们定义了三个函数：addTodo用于添加新的待办事项，editTodo用于编辑待办事项，deleteTodo用于删除待办事项。这些函数使用setTodos来更新todos状态。

在return语句中，我们渲染了一个表单，用户可以在输入框中输入新的待办事项，并通过点击“Add”按钮来提交。待办事项列表使用一个无序列表来展示，其中每个待办事项都有一个输入框和一个“Delete”按钮。

在输入框中，我们使用了defaultValue属性来设置输入框的初始值，并通过onChange事件监听输入框的变化，并调用editTodo函数来更新对应的待办事项。

我们将TodoList组件导出，并在src目录下的index.js文件中进行导入和渲染。

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

ReactDOM.render(<TodoList />, document.getElementById('root'));

最后，在终端中运行npm start来启动应用程序，并在浏览器中打开http://localhost:3000，你将看到一个简单的待办事项列表应用。你可以输入新的待办事项，编辑事项的文本，并删除不需要的事项。

使用React可以更加方便地管理组件的状态和交互，并且提供了更好的组织和可维护性。你可以根据需要对上述代码进行扩展和定制，以创建更复杂和功能强大的待办事项列表应用。