react todolist组件化案例

React Todolist组件化案例是一个使用React框架开发的待办事项列表应用程序。该应用程序将待办事项列表分解为多个可重用的组件，包括添加待办事项、显示待办事项列表和标记已完成的待办事项等组件。通过组件化的方式，可以使代码更加模块化、可维护性更高，并且可以更容易地扩展和重用代码。该案例展示了React框架的强大功能，以及如何使用组件化的方式来构建复杂的应用程序。

相关问题

react使用组件写todolist

好的，下面是一个简单的React TodoList组件，包含添加、删除和完成任务的功能：

import React, { useState } from "react";

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

  const handleInputChange = (e) => setInputValue(e.target.value);

  const handleAddTodo = () => {
    if (inputValue.trim()) {
      setTodos([...todos, { id: Date.now(), text: inputValue, completed: false }]);
      setInputValue("");
    }
  };

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

  const handleCompleteTodo = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  return (
    <div>
      <input value={inputValue} onChange={handleInputChange} />
      <button onClick={handleAddTodo}>Add</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span
              style={{ textDecoration: todo.completed ? "line-through" : "" }}
              onClick={() => handleCompleteTodo(todo.id)}
            >
              {todo.text}
            </span>
            <button onClick={() => handleDeleteTodo(todo.id)}>X</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

这个组件包含一个输入框和添加按钮，用于添加新的任务。任务列表中的每个任务都可以被标记为已完成或删除。在任务列表中，已完成的任务会被添加一个删除线。

react todo list组件化小案例

好的，下面是一个简单的 React Todo List 组件化的示例代码：

import React, { useState } from 'react';

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

  function handleAddTodo() {
    if (inputValue.trim()) {
      setTodos([...todos, { id: Date.now(), text: inputValue.trim() }]);
      setInputValue('');
    }
  }

  function handleDeleteTodo(id) {
    setTodos(todos.filter(todo => todo.id !== id));
  }

  return (
    <div>
      <h2>Todo List</h2>
      <input
        type="text"
        value={inputValue}
        onChange={e => setInputValue(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text}{' '}
            <button type="button" onClick={() => handleDeleteTodo(todo.id)}>
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

在这个示例代码中，我们定义了一个名为 `TodoList` 的函数组件，它使用了 React 的 `useState` 钩子来管理 `todos` 和 `inputValue` 状态。

在组件渲染时，我们通过 `todos.map` 方法遍历 `todos` 数组，生成一个包含所有待办事项的列表。同时，每个待办事项后面都有一个 `Delete` 按钮，点击该按钮将会触发 `handleDeleteTodo` 方法，删除对应的待办事项。

在 `handleAddTodo` 方法中，我们使用了 ES6 的扩展语法来添加新的待办事项，同时清空输入框的内容。

最后，我们将 `TodoList` 组件导出，并在其他组件中引用它即可。