React实现简易Todo | 青训营

React 是一种流行的JavaScript库，用于快速构建用户界面。它提供了一种简洁而强大的方式来创建可复用的UI组件。在本文中，我们将使用 React 来实现一个简单的待办事项列表，具有基本的添加、编辑和删除待办事项功能。

🎯 1. 创建 React 组件

首先，我们需要创建一个React组件来表示待办事项列表。

1. 我们将使用函数组件的方式来定义这个组件，因为函数组件更简洁、易于理解和维护。
2. 在组件中，我们将使用React的useState钩子函数来创建状态变量。

import React, { useState } from 'react';

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

  // 添加待办事项
  const addTodo = () => {
    if (inputValue.trim() !== '') {
      const newTodo = {
        id: new Date().getTime(),
        text: inputValue,
      };
      setTodos([...todos, newTodo]);
      setInputValue('');
    }
  };

  // 编辑待办事项
  const editTodo = (id, newText) => {
    const updatedTodos = todos.map(todo => {
      if (todo.id === id) {
        return { ...todo, text: newText };
      }
      return todo;
    });
    setTodos(updatedTodos);
  };

  // 删除待办事项
  const deleteTodo = id => {
    const updatedTodos = todos.filter(todo => todo.id !== id);
    setTodos(updatedTodos);
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={e => setInputValue(e.target.value)}
      />
      <button onClick={addTodo}>添加</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <input
              type="text"
              value={todo.text}
              onChange={e => editTodo(todo.id, e.target.value)}
            />
            <button onClick={() => deleteTodo(todo.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

（省略样式相关与挂载部分代码）

🥰 2. 代码分析

在上述代码中，我们首先导入了React和useState钩子函数。然后，我们定义了TodoList组件，并在组件内部使用useState钩子函数来创建两个状态变量：todos和inputValue。todos用于存储待办事项的数组，inputValue用于存储用户输入的值。

useState钩子函数是React中实现响应式功能的重要函数。在React中，状态变量是一种用于存储和管理组件内部数据的机制。useState函数接受一个初始值作为参数，并返回一个包含当前状态值和更新状态值的数组。我们可以将其不准确地类比为 Vue 中的 ref 或是 Reactive

接下来，我们定义了addTodo、editTodo和deleteTodo三个函数来处理用户的输入和操作，并使用setTodos函数来更新todos的值。

在组件的返回部分，我们使用了JSX语法来构建待办事项列表的UI。用户可以输入待办事项的文本，并点击“添加”按钮来添加新的待办事项。已添加的待办事项会显示在一个无序列表中，每个待办事项都包含一个文本输入框和一个“删除”按钮。用户可以编辑待办事项的文本，并点击“删除”按钮来删除待办事项。