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

用户216682018400
30 阅读3分钟

在现代 Web 应用开发的舞台上，React 以其高效、灵活和声明式的特性成为众多开发者手中的利器。今天，我们将运用 React 构建一个简单而实用的待办事项列表应用，让用户能够轻松地添加、编辑和删除待办事项，开启一段流畅的任务管理之旅。

首先，我们搭建 React 项目的基本框架。使用create-react-app工具快速创建一个新的 React 项目，这就像是为我们的应用搭建了一个坚实的舞台，准备好了所有的基础道具和设施。

在项目的入口文件index.js中，我们渲染根组件到index.html页面的指定root元素上：

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

接下来，我们聚焦于核心的App组件。在App.js文件中，我们首先定义组件的初始状态，用于存储待办事项列表和当前正在编辑的事项：

import React, { useState } from'react';

const App = () => {
  const [todos, setTodos] = useState([]);
  const [editingIndex, setEditingIndex] = useState(-1);
  const [newTodo, setNewTodo] = useState('');

  //... 其他代码将在后续添加
};

export default App;

这里，useState是 React 的 Hook 函数，它让我们能够在函数组件中方便地使用状态。todos数组用于保存所有的待办事项，editingIndex表示当前正在编辑的事项在todos数组中的索引，如果为 -1 则表示没有正在编辑的事项，newTodo用于存储用户输入的新待办事项内容。

然后，我们实现添加待办事项的功能。创建一个输入框和一个添加按钮，当用户在输入框中输入待办事项内容并点击添加按钮时，将新事项添加到todos列表中：

const addTodo = () => {
  if (newTodo.trim() === '') return;
  setTodos([...todos, { id: Date.now(), text: newTodo, completed: false }]);
  setNewTodo('');
};

return (
  <div className="App">
    <h1>待办事项列表</h1>
    <input
      type="text"
      placeholder="添加新事项"
      value={newTodo}
      onChange={(e) => setNewTodo(e.target.value)}
    />
    <button onClick={addTodo}>添加</button>
    <ul>
      {todos.map((todo, index) => (
        <li key={todo.id}>
          {editingIndex === index? (
            <input
              type="text"
              defaultValue={todo.text}
              onChange={(e) => updateTodoText(e.target.value, index)}
            />
          ) : (
            <>
              <input type="checkbox" checked={todo.completed} onChange={() => toggleTodoCompletion(index)} />
              {todo.text}
              <button onClick={() => startEditing(index)}>编辑</button>
              <button onClick={() => deleteTodo(index)}>删除</button>
            </>
          )}
        </li>
      ))}
    </ul>
  </div>
);

在上述代码中，addTodo函数首先检查用户输入是否为空，如果不为空，则创建一个新的待办事项对象，包含唯一的id、用户输入的text以及初始为false的completed状态。然后，将新事项添加到todos数组中，并清空newTodo输入框。

接着，实现编辑待办事项的功能。当用户点击某个待办事项的 “编辑” 按钮时，设置editingIndex为该事项的索引，从而在列表中显示对应的输入框，让用户可以修改事项内容：

const startEditing = (index) => {
  setEditingIndex(index);
};

const updateTodoText = (text, index) => {
  const updatedTodos = [...todos];
  updatedTodos[index].text = text;
  setTodos(updatedTodos);
};

startEditing函数用于设置当前编辑的索引，updateTodoText函数则在用户修改输入框内容后，更新对应的待办事项文本。

再实现删除待办事项的功能，当点击 “删除” 按钮时，从todos数组中移除相应的事项：

const deleteTodo = (index) => {
  const updatedTodos = todos.filter((_, i) => i!== index);
  setTodos(updatedTodos);
  if (editingIndex === index) {
    setEditingIndex(-1);
  }
};

最后，实现标记待办事项完成状态的功能，当用户点击待办事项前的复选框时，更新该事项的completed状态：

const toggleTodoCompletion = (index) => {
  const updatedTodos = [...todos];
  updatedTodos[index].completed =!updatedTodos[index].completed;
  setTodos(updatedTodos);
};

通过以上代码，我们成功构建了一个功能完整的 React 待办事项列表应用。用户可以方便地添加新事项、编辑已有事项、删除不需要的事项以及标记事项的完成状态。在样式方面，可以通过 CSS 对页面进行美化，例如为列表添加样式、设置按钮的颜色和大小等，使应用具有更好的视觉效果和用户体验。这个简单的示例展示了 React 在构建交互式用户界面方面的强大能力，开发者可以基于此进一步扩展和完善应用，如添加本地存储功能以便在页面刷新后仍能保留待办事项数据，或者实现待办事项的分类、排序等高级功能。

avatar
文章
阅读
粉丝