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

如何利用React.js来创建一个既简洁又具有高级感的待办事项列表，这个小项目可以帮助你更好地管理日常任务。初学者可以尝试食用，由于是初学者，检索了一些资料，这篇笔记会比较基础，包含了准备阶段等，如有错误，欢迎指正！

准备阶段

在开始之前，请确保你已经安装了Node.js和npm（Node包管理器）。这两个工具是运行和构建React应用的基础。接下来，我们可以使用Create React App来快速搭建一个新的React项目。

1. 打开终端或命令提示符，输入以下命令来创建一个新的React应用：

   npx create-react-app todo-list
   

2. 创建完成后，进入项目目录：

   cd todo-list
   

3. 启动项目，看看我们的起点：

   npm start
   

构建待办事项列表

设计组件结构

我们的待办事项列表将包含以下几个组件：

• App：主组件，包含整个应用的状态和逻辑。
• TodoInput：用于输入和添加新待办事项的组件。
• TodoList：展示待办事项列表的组件。
• TodoItem：单个待办事项的组件，包含编辑和删除功能。

实现TodoInput组件

TodoInput组件负责接收用户输入，并添加新的待办事项。

import React, { useState } from 'react';

function TodoInput({ onAdd }) {
  const [input, setInput] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!input) return;
    onAdd(input);
    setInput('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="添加新的待办事项"
      />
      <button type="submit">添加</button>
    </form>
  );
}

实现TodoItem组件

TodoItem组件负责展示单个待办事项，并提供编辑和删除功能。

import React, { useState } from 'react';

function TodoItem({ todo, onEdit, onDelete }) {
  const [editing, setEditing] = useState(false);
  const [value, setValue] = useState(todo.text);

  const handleEdit = () => {
    setEditing(true);
  };

  const handleSave = () => {
    onEdit(todo.id, value);
    setEditing(false);
  };

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

  if (editing) {
    return (
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onBlur={handleSave}
        onKeyDown={(e) => { if (e.key === 'Enter') handleSave(); }}
      />
    );
  }

  return (
    <div>
      <span onDoubleClick={handleEdit}>{todo.text}</span>
      <button onClick={handleEdit}>编辑</button>
      <button onClick={handleDelete}>删除</button>
    </div>
  );
}

实现TodoList组件

TodoList组件负责展示整个待办事项列表。

import React from 'react';

function TodoList({ todos, onEdit, onDelete }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          <TodoItem todo={todo} onEdit={onEdit} onDelete={onDelete} />
        </li>
      ))}
    </ul>
  );
}

实现App组件

App组件是整个应用的核心，负责管理待办事项的状态和逻辑。

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

function App() {
  const [todos, setTodos] = useState([]);
  const [nextId, setNextId] = useState(0);

  const handleAdd = (text) => {
    setTodos([
      ...todos,
      { id: nextId, text },
    ]);
    setNextId(nextId + 1);
  };

  const handleEdit = (id, text) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, text } : todo
      )
    );
  };

  const handleDelete = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  return (
    <div>
      <h1>待办事项列表</h1>
      <TodoInput onAdd={handleAdd} />
      <TodoList
        todos={todos}
        onEdit={handleEdit}
        onDelete={handleDelete}
      />
    </div>
  );
}

export default App;

最后

好啦，这就是今天用React创建的待办事项列表。希望这篇小笔记在如何用React构建一个简洁美观的待办事项列表对你有帮助！