第六届字节跳动青训营使用React 代码实现一个简单的待办事项列表 ｜ 青训营

使用 React 实现一个简单的待办事项列表可以通过创建组件和使用状态来实现。下面是一个示例代码，展示了如何实现添加、编辑和删除待办事项的功能：

import React, { useState } from 'react';

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

  const addTodo = () => {
    if (inputValue.trim() !== '') {
      const newTodo = {
        id: Date.now(),
        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;

上述代码中，使用了 useState 钩子来创建了两个状态：todos 用于存储待办事项列表，inputValue 用于存储输入框的值。通过调用 setTodos 和 setInputValue 函数，可以更新这两个状态。

在 addTodo 函数中，首先检查输入框的值是否为空，然后创建一个新的待办事项对象，并将其添加到 todos 数组中。然后，清空输入框的值。

在 editTodo 函数中，使用 map 方法遍历 todos 数组，找到要编辑的待办事项，并更新其文本。然后，使用 setTodos 函数更新 todos 数组。

在 deleteTodo 函数中，使用 filter 方法过滤掉要删除的待办事项，并使用 setTodos 函数更新 todos 数组。

最后，在组件的渲染部分使用了输入框、按钮和列表来展示待办事项。每个待办事项都有一个编辑输入框和一个删除按钮，通过调用相应的函数来实现编辑和删除功能。

总结：上述代码实现了一个简单的待办事项列表，用户可以通过输入框添加新的待办事项，通过编辑输入框修改待办事项的文本，以及通过删除按钮删除待办事项。这个示例展示了如何使用 React 的状态和事件处理来实现基本的待办事项功能。具体的样式和其他功能可以根据实际需求进行调整和扩展。