使用React实现待办事项列表的技术分享|青训营

用户4881392560903
81 阅读2分钟

简介： React是一个流行的用于构建用户界面的JavaScript库，它具有高效、可重用和可组合的特点。本文将通过一个简单的示例，演示如何使用React创建一个待办事项列表，并实现添加、编辑和删除待办事项的功能。

正文： 一、准备工作 在开始之前，需要确保已经安装了Node.js和npm。然后可以通过以下命令来创建一个新的React项目：

npx create-react-app todo-list

二、创建待办事项列表组件 首先，在src目录下创建一个名为TodoList.js的文件，代码如下所示：

import React, { useState } from 'react';

function TodoList() {
  const [todoList, setTodoList] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const handleAddTodo = () => {
    if (newTodo.trim() !== '') {
      setTodoList([...todoList, newTodo]);
      setNewTodo('');
    }
  };

  const handleEditTodo = (index, updatedTodo) => {
    const updatedList = [...todoList];
    updatedList[index] = updatedTodo;
    setTodoList(updatedList);
  };

  const handleDeleteTodo = (index) => {
    const updatedList = [...todoList];
    updatedList.splice(index, 1);
    setTodoList(updatedList);
  };

  return (
    <div>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add</button>

      <ul>
        {todoList.map((todo, index) => (
          <li key={index}>
            <input
              type="text"
              value={todo}
              onChange={(e) => handleEditTodo(index, e.target.value)}
            />
            <button onClick={() => handleDeleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

三、使用待办事项列表组件 在src目录下的App.js文件中，将TodoList组件导入并使用：

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

function App() {
  return (
    <div>
      <h1>Todo List</h1>
      <TodoList />
    </div>
  );
}

export default App;

四、运行应用程序 在项目根目录下，执行以下命令来启动应用程序：

npm start

然后在浏览器中打开http://localhost:3000，即可看到待办事项列表页面。

五、功能解析

  1. 添加待办事项：用户在输入框中输入内容，点击"Add"按钮后，将新的待办事项添加到列表中。
  2. 编辑待办事项：用户可以直接在待办事项的输入框中修改内容，并且会实时更新到列表中。
  3. 删除待办事项：用户点击每个待办事项后面的"Delete"按钮，即可将其从列表中删除。

六、总结 通过这个简单的示例，我们使用React创建了一个基本的待办事项列表，实现了添加、编辑和删除待办事项的功能。React的状态管理和组件化特性使得这个过程变得非常简单和高效。通过React的虚拟DOM技术，只有发生变化的部分会重新渲染，提高了应用程序的性能。

React是一个功能强大且受欢迎的前端框架，它的学习和使用需要不断的实践和探索。希望本文能够帮助读者初步了解React的基本使用以及构建简单应用的流程，同时也鼓励读者继续学习和深入探索React的更多功能和高级概念。

avatar
文章
阅读
粉丝