使用React 实现一个简单的待办事项列表| 豆包MarsCode AI刷题

要使用React实现一个简单的待办事项列表：

1. 创建一个新的React应用。
2. 创建一个TodoList组件来管理待办事项的添加、编辑和删除功能。
3. 使用useState钩子来存储待办事项列表。
4. 为每个待办事项创建一个单独的组件（例如TodoItem），并传递必要的props和事件处理函数。
5. 在TodoList组件中实现添加、编辑和删除待办事项的逻辑。
6. 渲染TodoList组件到主应用组件中。

好的，下面我们将按照您的要求一步步来创建这个React应用。首先确保您已经安装了Node.js和npm（或yarn）。接着，我们开始创建新的React应用，并实现TodoList和TodoItem组件。

步骤 1: 创建一个新的React应用

打开终端并运行以下命令来创建一个新项目：

npx create-react-app todo-app
cd todo-app

步骤 2 & 3: 创建TodoList组件并使用useState钩子

在src目录下创建一个名为TodoList.js的新文件，并添加如下代码：

import React, { useState } from 'react';
import TodoItem from './TodoItem';

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  // 添加待办事项
  const addTodo = (event) => {
    event.preventDefault();
    if (inputValue.trim()) {
      setTodos([...todos, { id: Date.now(), text: inputValue, isEditing: false }]);
      setInputValue('');
    }
  };

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

  // 更新待办事项
  const updateTodo = (id, newText) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, text: newText, isEditing: false } : todo
    ));
  };

  // 切换编辑状态
  const toggleEdit = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, isEditing: !todo.isEditing } : todo
    ));
  };

  return (
    <div>
      <h1>Todo List</h1>
      <form onSubmit={addTodo}>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="Add a new todo"
        />
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {todos.map(todo => (
          <TodoItem
            key={todo.id}
            todo={todo}
            onDelete={deleteTodo}
            onUpdate={updateTodo}
            onToggleEdit={toggleEdit}
          />
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

步骤 4: 创建TodoItem组件

在同一目录下创建一个名为TodoItem.js的文件，并添加以下内容：

import React, { useState } from 'react';

const TodoItem = ({ todo, onDelete, onUpdate, onToggleEdit }) => {
  const [editText, setEditText] = useState(todo.text);

  const handleDelete = () => {
    onDelete(todo.id);
  };

  const handleUpdate = (event) => {
    event.preventDefault();
    onUpdate(todo.id, editText);
  };

  const handleChange = (event) => {
    setEditText(event.target.value);
  };

  return (
    <li>
      {todo.isEditing ? (
        <>
          <input type="text" value={editText} onChange={handleChange} />
          <button onClick={handleUpdate}>Save</button>
        </>
      ) : (
        <span>{todo.text}</span>
      )}
      <button onClick={() => onToggleEdit(todo.id)}>Edit</button>
      <button onClick={handleDelete}>Delete</button>
    </li>
  );
};

export default TodoItem;

步骤 5: 在主应用组件中渲染TodoList组件

修改App.js文件，使其引入并渲染TodoList组件：

import React from 'react';
import TodoList from './TodoList';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <TodoList />
      </header>
    </div>
  );
}

export default App;

现在，您应该有了一个完整的待办事项列表应用程序，它支持添加、编辑和删除待办事项的功能。您可以运行npm start来启动开发服务器，并在浏览器中查看结果。如果需要进一步美化界面，可以考虑在App.css或其他样式文件中添加CSS样式。 在这个例子中，我们创建了一个TodoList组件来管理整个待办事项列表，以及一个TodoItem组件来表示单个待办事项。用户可以在输入框中输入新的待办事项，并通过点击“Add Todo”按钮添加到列表中。每个待办事项旁边有“Edit”和“Delete”按钮，允许用户编辑或删除待办事项。