使用React 实现一个简单的待办事项列表| 青训营

困困困忙忙忙
87 阅读2分钟

使用React 实现一个简单的待办事项列表：用户可以添加、编辑和删除待办事项

React是一个流行的JavaScript库，用于构建用户界面。它的组件化开发模式使得构建复杂的用户界面变得更加简单和高效。在本文中，我们将探讨如何使用React来实现一个简单的待办事项列表，使用户能够添加、编辑和删除待办事项。

首先，我们需要设置一个React项目。你可以使用create-react-app来快速创建一个React项目。在终端中运行以下命令：

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

完成这些步骤后，你的React项目就已经准备好了。

接下来，我们需要创建一个TodoList组件来显示待办事项列表。在src文件夹中创建一个新的文件TodoList.js，并添加以下代码：

import React, { useState } from 'react';

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

  const handleAddTodo = () => {
    if (inputValue !== '') {
      setTodos([...todos, inputValue]);
      setInputValue('');
    }
  };

  const handleEditTodo = (index) => {
    const newTodos = [...todos];
    newTodos[index] = inputValue;
    setTodos(newTodos);
    setInputValue('');
  };

  const handleDeleteTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => handleEditTodo(index)}>Edit</button>
            <button onClick={() => handleDeleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

在这段代码中，我们使用了React的useState钩子来管理待办事项列表（todos）和输入框的值（inputValue）。handleAddTodo函数用于添加新的待办事项，handleEditTodo函数用于编辑待办事项，handleDeleteTodo函数用于删除待办事项。

接下来，我们需要在App.js中使用TodoList组件。在src文件夹中打开App.js，并将以下代码添加到文件中：

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

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

export default App;

在这段代码中，我们将TodoList组件包裹在一个div中，并添加了一个标题。

最后，我们需要在index.js中渲染App组件。在src文件夹中打开index.js，并将以下代码添加到文件中：

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

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

现在，你可以在终端中运行以下命令来启动应用程序：

npm start

你的待办事项列表应该已经在浏览器中显示出来了。你可以尝试添加、编辑和删除待办事项，并观察列表的变化。

通过使用React，我们可以轻松地实现一个简单的待办事项列表，并使用户能够添加、编辑和删除待办事项。React的组件化开发模式使得构建复杂的用户界面变得更加简单和高效。希望这篇文章对你理解如何使用React来实现待办事项列表有所帮助。

avatar
文章
阅读
粉丝