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

分布讲解

addTodo

  const addTodo = () => {
    if (inputValue.trim() !== '') {
      const newTodo = {
        id: Math.random(),
        text: inputValue,
      };
      setTodos([...todos, newTodo]);
      setInputValue('');
    }
  };

addTodo函数用于添加新的待办事项到列表中。它会检查输入框的值是否为空，如果不为空，则创建一个新的待办事项对象，并将其添加到todos数组中。然后，清空输入框的值。

editTodo

  const editTodo = (id, newText) => {
    const updatedTodos = todos.map(todo => {
      if (todo.id === id) {
        return { ...todo, text: newText };
      }
      return todo;
    });
    setTodos(updatedTodos);
  };

editTodo函数用于编辑待办事项的文本。它接受待办事项的ID和新的文本作为参数，并使用map函数遍历todos数组，找到对应ID的待办事项，并更新其文本。然后，使用更新后的todos数组更新状态。

deleteTodo

  const deleteTodo = id => {
    const updatedTodos = todos.filter(todo => todo.id !== id);
    setTodos(updatedTodos);
  };

deleteTodo函数用于删除待办事项。它接受待办事项的ID作为参数，并使用filter函数从todos数组中过滤掉对应ID的待办事项。然后，使用过滤后的todos数组更新状态。

全部代码

import React, { useState } from 'react';

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

  const addTodo = () => {
    if (inputValue.trim() !== '') {
      const newTodo = {
        id: Math.random(),
        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={event => setInputValue(event.target.value)}
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <input
              type="text"
              value={todo.text}
              onChange={event => editTodo(todo.id, event.target.value)}
            />
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

总结

在这个示例中，我们使用了React的useState钩子来管理待办事项列表和输入框的状态。todos数组用于存储待办事项的信息，inputValue用于存储输入框的值。