React 入门实例学习笔记四、 TodoApp 功能分步实现

原创

已于 2022-04-02 19:15:24 修改 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react #前端

于 2022-03-21 23:11:05 首次发布

博主介绍：大爽歌, b站小UP主，直播编程+红警三，python1对1辅导老师。

本博客为microsoft的的Frontend Bootcamp 的day1中 react 部分的学习笔记

笔记目录: React 入门实例学习笔记目录
请先看目录，按照目录先后顺序阅读实践
本博客有对应视频版本，具体见目录。

0 分支检出

使用vs-code
从上一节的分支todoapp-v1，检出分支todoapp-v2
具体见视频:
【代码过程】 React 入门实例 TodoApp 学习梳理笔记

1 TodoList 实现

之前TodoList的TodoListItem 中的内容是写死的。
这里改为根据Todos的数据，动态生成内容。

再修改src/TodoApp.tsx，添加defaultTodos，
在TodoApp中添加todos并进行传参。
修改后如下

import React from 'react';
import {
   
    TodoHeader } from './components/TodoHeader.tsx';
import {
   
    TodoList } from './components/TodoList.tsx';
import {
   
    TodoFooter } from './components/TodoFooter.tsx';

const defaultTodos = [
  {
   
   
    id: '01',
    label: 'Todo 1',
    status: 'completed',
  },
  {
   
   
    id: '02',
    label: 'Todo 2',
    status: 'active',
  },  
  {
   
   
    id: '03',
    label: 'Todo 2',
    status: 'active',
  },  
  {
   
   
    id: '04',
    label: 'Todo 3',
    status: 'completed',
  },
]

export const TodoApp = props => {
   
   
  const [todos, setTodos] = React.useState(defaultTodos);

  return (
    <div>
      <TodoHeader />
      <TodoList todos={
   
   todos}/>
      <TodoFooter />
    </div>
  )
}

再修改src/components/TodoList.tsx成如下

import React from 'react';
import {
   
    TodoListItem } from './TodoListItem.tsx';

export const TodoList = (props) => {
   
   
  const {
   
    todos } = props;

  return (
    <ul className='todos'>
      {
   
   todos.map((todo)=> <TodoListItem key={
   
   todo.id} {
   
   ...todo} />)}
    </ul>
  )
}

再修改src/components/TodoListItem.tsx成如下

import React from 'react';

export const TodoListItem = (props) => {
   
   
  const {
   
    label, status, id } = props;

  return (
    <li className="todo">
      <label>
        <input type="checkbox" checked={
   
   status === 'completed'} /> {
   
   label}
      </label>
    </li>
  );
}

然后TodoList部分就可以动态展示todos的数据内容了

2 TodoListItem checkbox(复选框) 功能实现

目前TodoListItem的 checkbox(复选框) 是无法勾选的。
需要实现选中和取消选中功能。

修改src/TodoApp.tsx，添加toggleCompleted方法并传参给TodoList。
修改后如下

import React from 'react';
import {
   
    TodoHeader } from './components/TodoHeader.tsx';
import {
   
    TodoList } from './components/TodoList.tsx';
import {
   
    TodoFooter } from './components/TodoFooter.tsx';

const defaultTodos = [
  {
   
   
    id: '01',
    label: 'Todo 1',
    status: 'completed',
  },
  {