如何利用React轻松创建待办事项列表

2023-07-28 04:16:03

掌握React构建待办事项列表，管理任务优化流程

序言：

待办事项列表作为任务管理的利器，帮助我们井然有序地规划日程，提高工作效率。而React作为前端开发中的佼佼者，凭借其简洁高效的组件化设计，为构建交互式待办事项列表提供了强有力的支持。本文将带你深入浅出地探索如何运用React打造一个功能完善的待办事项列表，从组件设计到状态管理，为你揭开任务管理新篇章。

核心组件：搭建待办事项框架

构建待办事项列表涉及几个关键组件：

列表容器： 容纳所有待办事项的承载空间，犹如一个放置任务的盒子。
待办事项组件： 单个待办事项的具象化，包含标题、状态等信息。
表单组件： 用于输入新待办事项的入口，就好比一个任务输入台。
状态管理： 跟踪待办事项状态（已完成/未完成）的机制，相当于记录任务完成情况的日志。

组件设计：构建模块化待办事项

待办事项组件：

const TodoItem = ({ todo, onToggle, onDelete }) => {
  return (
    <li className={todo.completed ? "completed" : "incomplete"}>
      <input type="checkbox" checked={todo.completed} onChange={onToggle} />
      <span>{todo.title}</span>
      <button onClick={onDelete}>X</button>
    </li>
  );
};

表单组件：

const TodoForm = ({ onAdd }) => {
  const [title, setTitle] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    onAdd(title);
    setTitle('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} />
      <button type="submit">添加</button>
    </form>
  );
};

列表容器组件：

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

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/todos').then((res) => {
      setTodos(res.data.slice(0, 10));
    });
  }, []);

  const addTodo = (title) => {
    setTodos([...todos, { title: title, completed: false }]);
  };

  const toggleTodo = (id) => {
    const newTodos = [...todos];
    const todo = newTodos.find((todo) => todo.id === id);
    todo.completed = !todo.completed;
    setTodos(newTodos);
  };

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

  return (
    <div>
      <TodoForm onAdd={addTodo} />
      <ul>
        {todos.map((todo) => (
          <TodoItem key={todo.id} todo={todo} onToggle={() => toggleTodo(todo.id)} onDelete={() => deleteTodo(todo.id)} />
        ))}
      </ul>
    </div>
  );
};