React待办事项列表 | 青训营

以下是使用React实现一个简单的待办事项列表的代码：

jsxCopy code
import React, { useState } from 'react';

const TodoList = () => {
  const [todos, setTodos] = useState([]); // 初始的待办事项为空数组
  const [inputValue, setInputValue] = useState(''); // 输入框的值

  // 添加待办事项
  const addTodo = () => {
    if (inputValue !== '') {
      const newTodo = {
        id: Date.now(), // 使用当前时间戳作为待办事项的唯一标识符
        text: inputValue,
      };
      setTodos([...todos, newTodo]);
      setInputValue(''); // 清空输入框的值
    }
  };

  // 编辑待办事项
  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>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={addTodo}>Add</button>

      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <input
              type="text"
              defaultValue={todo.text}
              onBlur={(e) => editTodo(todo.id, e.target.value)}
            />
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

上述代码中，我们使用了React的函数组件和Hooks。

首先，我们定义了初始的待办事项列表（todos）和输入框的值（inputValue）以及相应的状态（useState）。然后，我们定义了三个函数：addTodo用于添加待办事项，editTodo用于编辑待办事项，deleteTodo用于删除待办事项。这些函数会根据用户的操作更新todos的状态。

在return语句中，我们呈现了一个简单的待办事项列表的界面。用户可以通过输入框输入待办事项的文本，并通过点击“Add”按钮将其添加到列表中。每个待办事项都包含一个可编辑的文本框和一个“Delete”按钮。当用户编辑文本框中的内容后，焦点离开文本框时会调用editTodo函数来更新待办事项的文本。当用户点击“Delete”按钮时，会调用deleteTodo函数来删除该待办事项。

在上面的代码中，我们没有实现任何样式，可以根据需要自行添加样式。另外，还可以进一步对代码进行优化，例如使用组件分离、添加一些验证逻辑等。