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

需求

使用React创建一个待办事项列表时，需要设置组件来处理待办事项的添加、编辑和删除功能。

npm install react react-dom

实现

下面是一个简单的实现，包括一个父组件（TodoList）和一个子组件（TodoItem）

新建 todoItem.js 文件，然后：

import React, { useState } from 'react';

const TodoItem = ({ todo, index, deleteTodo, updateTodo }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [updatedTodo, setUpdatedTodo] = useState(todo);

  const handleDeleteTodo = () => {
    deleteTodo(index);
  };

  const handleEditClick = () => {
    setIsEditing(true);
  };

  const handleUpdateTodo = () => {
    updateTodo(index, updatedTodo);
    setIsEditing(false);
  };

  const handleInputChange = (e) => {
    setUpdatedTodo(e.target.value);
  };

  return (
    <div>
      {isEditing ? (
        <div>
          <input
            type="text"
            value={updatedTodo}
            onChange={handleInputChange}
          />
          <button onClick={handleUpdateTodo}>Save</button>
        </div>
      ) : (
        <div>
          <span>{todo}</span>
          <button onClick={handleEditClick}>Edit</button>
          <button onClick={handleDeleteTodo}>Delete</button>
        </div>
      )}
    </div>
  );
};

export default TodoItem;

在上面的代码中，我们定义了一个名为TodoItem的函数组件。它接收todo（待办事项的文本）、index（待办事项的索引）、deleteTodo（删除待办事项的函数）和updateTodo（更新待办事项的函数）作为props。

使用useState钩子来追踪编辑模式（isEditing）、更新后的待办事项（updatedTodo）以及输入框的值。当用户点击编辑按钮时，我们将isEditing设置为true，这将显示一个带有输入框和保存按钮的编辑界面。当用户点击保存按钮时，我们调用updateTodo函数并将updatedTodo作为参数传递给它来更新待办事项

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

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const addTodo = () => {
    if (newTodo !== '') {
      setTodos([...todos, newTodo]);
      setNewTodo('');
    }
  };

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

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

  const handleInputChange = (e) => {
    setNewTodo(e.target.value);
  };

  return (
    <div>
      <input type="text" value={newTodo} onChange={handleInputChange} />
      <button onClick={addTodo}>Add</button>

      {todos.map((todo, index) => (
        <TodoItem
          key={index}
          todo={todo}
          index={index}
          deleteTodo={deleteTodo}
          updateTodo={updateTodo}
        />
      ))}
    </div>
  );
};

export default TodoList;

在TodoList组件中，我们使用useState钩子来追踪待办事项的列表（todos）和新待办事项的输入值（newTodo）。

addTodo函数用于将新待办事项添加到列表中。首先检查输入框的值是否为空，然后使用扩展运算符和setTodos函数更新todos状态，并将新待办事项添加到列表中。

deleteTodo函数用于删除待办事项。创建一个副本的todos数组，然后使用splice方法将指定索引的待办事项从数组中删除，并使用setTodos更新todos状态。

updateTodo函数用于更新待办事项。创建一个副本的todos数组，将更新后的待办事项替换指定索引位置的元素，并使用setTodos更新todos状态。

handleInputChange函数用于在输入框的值发生变化时更新newTodo的状态。

在TodoList组件的返回部分，我们渲染一个输入框和一个"Add"按钮，用于添加新的待办事项。然后，我们使用map函数遍历todos数组，并为每个待办事项渲染一个TodoItem组件。我们将todo、index、deleteTodo和updateTodo作为props传递给TodoItem组件

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

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

export default App;