1.30 实战案例：任务列表

一、任务列表-ToDoList

代码示例：

import { useState } from 'react'
import { useImmer } from 'use-immer'
import classNames from 'classnames'
import style from './30.module.css'

interface IList {
  id: number
  text: string
  checked: boolean
}

interface IParam {
  title: string
  list: IList[]
  handleCheck: never
}

function CompleteList({ title = '', list = [], handleCheck }: IParam) {
  return (
    <>
      {title}
      <ul>
        {list.map((item) => (
          <li
            key={item.id}
            className={classNames({ [style.active]: item.checked })}
          >
            <input
              type="checkbox"
              checked={item.checked}
              onChange={(e) => handleCheck(e, item.id)}
            />
            {item.text}
          </li>
        ))}
      </ul>
    </>
  )
}

function App() {
  const [msg, setMsg] = useState<string>('')
  const [list, setList] = useImmer<IList[]>([])
  const unCompleteList = list.filter((item) => !item.checked)
  const completeList = list.filter((item) => item.checked)

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setMsg(e.target.value)
  }

  const handleClick = () => {
    setList((d) => {
      d.unshift({ id: list.length, text: msg, checked: false })
    })
    setMsg('')
  }

  const handlechecked = (
    e: React.ChangeEvent<HTMLInputElement>,
    id: number
  ) => {
    setList((d) => {
      d.find((item) => item.id === id).checked = e.target.checked
    })
  }

  return (
    <>
      <div>
        <input type="text" value={msg} onChange={handleChange} />
        <button onClick={handleClick}>添加任务</button>
        <CompleteList
          title={<h2>未完成的任务：{unCompleteList.length}个</h2>}
          list={unCompleteList}
          handleCheck={handlechecked}
        />
        <CompleteList
          title={<h2>已完成的任务：{completeList.length}个</h2>}
          list={completeList}
          handleCheck={handlechecked}
        />
      </div>
    </>
  )
}

export default App

.active {
  text-decoration: line-through;
}