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

博主介绍：大爽歌, 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',
  },
  {
    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);

  const toggleCompleted = (id) => {
    const newTodos = todos.map((todo)=>{
      if (todo.id === id){
        return {...todo, status: todo.status === 'active' ? 'completed' : 'active'};
      } else {
        return todo;
      }
    });
    setTodos(newTodos);
  }

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

修改src/components/TodoList.tsx， 接受toggleCompleted方法并传参给TodoListItem。
修改后如下

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

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

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

修改src/components/TodoListItem.tsx， 接受toggleCompleted方法并使用。
修改后如下

import React from 'react';

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

  const handleCheck = () => {
    toggleCompleted(id);
  }

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

这样TodoListItem的 checkbox(复选框) 的勾选功能就实现好了。

3 TodoHeader 实现

修改src/TodoApp.tsx, 添加filter 属性和 addTodo 方法，并传参给需要的组件。

修改后如下

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 [filter, setFilter] = React.useState('all');
  const [todos, setTodos] = React.useState(defaultTodos);

  const addTodo = (label) => {
    const getId = () => Date.now().toString();
    const newTodo = {
      id: getId(),
      label: label,
      status: 'active',
    };
    setTodos([...todos, newTodo]);
  }

  const toggleCompleted = (id) => {
    const newTodos = todos.map((todo)=>{
      if (todo.id === id){
        return {...todo, status: todo.status === 'active' ? 'completed' : 'active'};
      } else {
        return todo;
      }
    });
    setTodos(newTodos);
  }

  return (
    <div>
      <TodoHeader filter={filter} setFilter={setFilter} addTodo={addTodo} />
      <TodoList todos={todos} filter={filter} toggleCompleted={toggleCompleted} />
      <TodoFooter />
    </div>
  )
}

修改src/components/TodoHeader.tsx，
添加各种事件处理方法
修改后如下

import React from 'react';

export const TodoHeader = (props) => {
  const [inputText, setInputText] = React.useState('');
  const { filter, setFilter, addTodo } = props;

  const onInput = (e) => {
    setInputText(e.target.value);
  }

  const onSubmit = () => {
    if (inputText.length > 0) {
      addTodo(inputText);
    };
    setInputText('');
  }

  const onFilter = (e) => {
    setFilter(e.currentTarget.textContent);
  }

  return (
    <header>
      <h1>todos <small>(Basic implementation)</small></h1>
      <div className="addTodo">
        <input className="textfield" placeholder = "add todo"
          value={inputText} onChange={onInput} />
        <button className="submit" onClick={onSubmit}>Add</button>
      </div>
      <nav className="filter">
        <button className={filter === 'all' ? 'selected' : ''} onClick={onFilter}>all</button>
        <button className={filter === 'active' ? 'selected' : ''} onClick={onFilter}>active</button>
        <button className={filter === 'completed' ? 'selected' : ''} onClick={onFilter}>completed</button>
      </nav>
    </header>
  )
}

修改src/components/TodoList.tsx，
接受filter参数，并处理todos数据得到filteredTodos。

修改后如下

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

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

  const filteredTodos = todos.filter((todo) => {
    if (todo.status === 'cleared'){
      return false;
    };

    if (filter === 'all') {
      return true;
    } else if (filter === 'completed') {
      return todo.status === 'completed';
    } else if (filter === 'active'){
      return todo.status === 'active';
    };

    return false;
  })

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

到这里，顶部栏的添加新todo，和过滤功能(点击all, active, completed切换)就实现好了。

4 TodoFooter 实现

最后还要实现，条目数量统计，和清理completed数据的按钮。

修改src/TodoApp.tsx， 添加clearCompleted方法并传参给TodoFooter,
修改后如下

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 [filter, setFilter] = React.useState('all');
  const [todos, setTodos] = React.useState(defaultTodos);

  const addTodo = (label) => {
    const getId = () => Date.now().toString();
    const newTodo = {
      id: getId(),
      label: label,
      status: 'active',
    };
    setTodos([...todos, newTodo]);
  }

  const toggleCompleted = (id) => {
    const newTodos = todos.map((todo)=>{
      if (todo.id === id){
        return {...todo, status: todo.status === 'active' ? 'completed' : 'active'};
      } else {
        return todo;
      }
    });
    setTodos(newTodos);
  }

  const clearCompleted = () => {
    const updateTodos = todos.map((todo) => {
      if(todo.status === 'completed') {
        return {...todo, status: 'cleared'};
      } else {
        return todo;
      }
    });

    setTodos(updateTodos);
  }

  return (
    <div>
      <TodoHeader filter={filter} setFilter={setFilter} addTodo={addTodo} />
      <TodoList todos={todos} filter={filter} toggleCompleted={toggleCompleted} />
      <TodoFooter todos={todos} clearCompleted={clearCompleted} />
    </div>
  )
}

修改src/components/TodoFooter.tsx，接受属性，并使用。
修改后如下

import React from 'react';

export const TodoFooter = (props) => {
  const { clearCompleted, todos } = props;
  const itemCount = todos.filter((todo) => todo.status === 'active' ).length;

  return (
    <footer>
      <span>{itemCount} item{itemCount === 1 ? '' : 's'} left</span>
      <button className="submit" onClick={clearCompleted} >Clear Completed</button>
    </footer>
  )
}

到这里，整个TodoApp的功能就基本实现完成了。

实现后的效果见视频16:35处