# TodoList_React+TS

**Repository Path**: lzy1110/TodoList_React_TS

## Basic Information

- **Project Name**: TodoList_React+TS
- **Description**: 用React+TS来写todoList案例，可快速入门、复习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://www.bilibili.com/video/BV1WC4y1B7Uq/?spm_id_from=333.788&vd_source=93ca85255ba515f0be10695b87a668c9
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-07
- **Last Updated**: 2024-04-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React + TS 的 todoList 案例

## 初始化

### 搭建项目

```cmd
npx create-next-app@latest

npm run dev
```

### 去掉原来的默认主页

```tsx
// src\app\page.tsx
export default function Home() {
  return <h1>TodoList</h1>;
}
```

### 拆分、新建组件

在 src 下新建 components 文件夹，在里面新建对应的 4 个 tsx： AddTodo、TodoItem、AddTodo、TodoFilter

## 初始化组件

### TodoFilter 组件、TodoItem 组件、AddTodo 组件、TodoList 组件

```tsx
function TodoFilter() {
  return (
    <div>
      <button>All</button>
      <button>Active</button>
      <button>Completed</button>
    </div>
  );
}

export default TodoFilter;

function TodoItem(props: any) {
  return <div>{props.todo.title}</div>;
}

export default TodoItem;

function AddTodo() {
  return (
    <div>
      <h1>AddTodo</h1>
    </div>
  );
}

export default AddTodo;

function TodoList() {
  return (
    <div>
      <h1>TodoList</h1>
    </div>
  );
}

export default TodoList;
```

### 引入组件

```tsx
// src\app\page.tsx
import AddTodo from "@/components/AddTodo";
import TodoFilter from "@/components/TodoFilter";
import TodoList from "@/components/TodoList";

export default function Home() {
  return (
    <div>
      <h1>TodoList</h1>
      <AddTodo></AddTodo>
      <TodoList></TodoList>
      <TodoFilter></TodoFilter>
    </div>
  );
}
```

## 正式开始

### 引入基本的 todoList 空数组

编写基本的 todo 接口

```ts
// src\types.ts
export interface Todo {
  id: number;
  text: string;
  completed: boolean;
}
```

引入接口，定义空数组

```tsx
import { Todo } from "@/types";

export default function Home() {
  const [todos, setTodos] = useState<Todo[]>([]);
  ...
}
```

### 定义 增、删、改 方法

```tsx
const addTodo = (text: string) => {
  const newTodo = {
    id: Date.now(),
    text,
    completed: false,
  };
  setTodos([...todos, newTodo]);
};

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

const toggleTodo = (id: number) => {
  setTodos(
    todos.map((todo) => {
      if (todo.id === id) {
        todo.completed = !todo.completed;
      }
      return todo;
    })
  );
};
```

### 定义 查 方法

```tsx
const [filter, setFilter] = useState("all");

const getFilteredTodos = () => {
  switch (filter) {
    case "completed":
      return todos.filter((todo) => todo.completed);
    case "active":
      return todos.filter((todo) => !todo.completed);
    default:
      return todos;
  }
};
```

### 完善 增 方法

```tsx
// src\components\AddTodo.tsx
import { useState } from "react";

interface AddTodoProps {
  addTodo: (text: string) => void;
}

function AddTodo({ addTodo }: AddTodoProps) {
  const [text, setText] = useState("");
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (text.trim().length === 0) return;
    addTodo(text);
    setText("");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={text}
        onChange={(e) => {
          setText(e.target.value);
        }}
      />
      <button>新建事项</button>
    </form>
  );
}

export default AddTodo;
```

### 完善 TodoList

```tsx
// src\app\page.tsx
...
<TodoList todos={getFilteredTodos()} deleteTodo={deleteTodo} toggleTodo={toggleTodo}></TodoList>
      ...
```

```tsx
// src\components\TodoList.tsx
import { Todo } from "@/types";
import TodoItem from "./TodoItem";

interface TodoListProps {
  todos: Array<Todo>;
  toggleTodo: (id: string) => void;
  deleteTodo: (id: string) => void;
}

function TodoList({ todos, toggleTodo, deleteTodo }: TodoListProps) {
  return (
    <ul>
      {todos.map((todo) => (
        <TodoItem
          key={todo.id}
          todo={todo}
          toggleTodo={toggleTodo}
          deleteTodo={deleteTodo}
        ></TodoItem>
      ))}
    </ul>
  );
}

export default TodoList;
```

```tsx
// src\components\TodoItem.tsx
function TodoItem({ todo, toggleTodo, deleteTodo }: any) {
  return (
    <li style={{ textDecoration: todo.completed ? "line-through" : "null" }}>
      {todo.text}
      <button onClick={() => toggleTodo(todo.id)}>切换</button>
      <button onClick={() => deleteTodo(todo.id)}>删除</button>
    </li>
  );
}

export default TodoItem;
```

### 完善 查（筛选） 方法

```tsx
// src\app\page.tsx
...
<TodoFilter setFilter={setFilter}></TodoFilter>
...
```

```tsx
// src\components\TodoFilter.tsx
function TodoFilter({ setFilter }: any) {
  return (
    <div>
      <button onClick={() => setFilter("all")}>All</button>
      <button onClick={() => setFilter("active")}>Active</button>
      <button onClick={() => setFilter("completed")}>Completed</button>
    </div>
  );
}

export default TodoFilter;
```