React 简单待办事项列表指南：助您轻松管理任务

2023-04-11 04:10:47

React：创建待办事项列表应用程序的完整指南

简介

任务管理是保持条理和提高效率的关键，但它也可能是一项乏味且耗时的任务。React 是一个流行的 JavaScript 库，可轻松创建交互式用户界面，使其成为构建待办事项列表应用程序的理想选择。

在本指南中，我们将逐步指导您完成使用 React 创建一个简单的待办事项列表应用程序，涵盖从安装必需依赖项到添加样式的所有内容。

安装和设置

创建 React 项目：

npx create-react-app my-todo-list

安装 React Router：

npm install react-router-dom

创建组件

创建待办事项列表组件：

import React, { useState } from 'react';
import { Link } from 'react-router-dom';

const TodoList = () => {
  // 使用 useState 管理待办事项列表
  const [todos, setTodos] = useState([]);

  // 添加待办事项
  const addTodo = (e) => {
    e.preventDefault();
    const todo = e.target.todo.value;
    setTodos([...todos, todo]);
  };

  // 删除待办事项
  const removeTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div>
      <h1>待办事项列表</h1>
      <form onSubmit={addTodo}>
        <input type="text" name="todo" />
        <button type="submit">添加</button>
      </form>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => removeTodo(index)}>X</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

创建主应用程序组件：

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

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

export default App;