千峰React:案例一

做这个案例捏

因为需要用到样式，所以创建一个样式文件：

//29_实战.module.css
.active{text-decoration:line-through
}

然后创建jsx文件，修改main文件：导入Todos，写入Todos组件

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import Todos from './28_实战'createRoot(document.getElementById('root')).render(<StrictMode><Todos /></StrictMode>
)

Todos.jsx文件需要先写渲染组件的基本结构：

function Todos() {return (<div></div>)
}
export default Todos

观察案例，首先需要一个添加任务的文本框、点击添加任务的按钮、用value使用可控组件改变value值，记得加onChange：

return (<div><input type='text' value={msg} onChange={handleChange} /><button onClick={handleClick}>点击添加任务</button></div>)

改变value的值、使用Immer整合更改

 const [msg, setMsg] = useState('')const [list, setList] = useImmer([])const handleChange = (e) => {setMsg(e.target.value)}const handleClick = () => {setList((draft) => {draft.unshift({ id: list.length, task: msg, checked: false })})setMsg('')}

复选框功能：

 const unCompleteList = list.filter((item) => !item.checked)const completeList = list.filter((item) => item.checked)const handleChecked = (e, id) => {setList((draft) => {draft.find((item) => item.id === id).checked = e.target.checked //更改对应id的数据的复选框状态})}return(<div>{/* {未完成的列表} */}<CompleteListtitle={<h2>未完成的任务:{unCompleteList.length}个</h2>}handleChecked={handleChecked}list={unCompleteList}/>{/* {已完成的列表} */}<CompleteListtitle={<h2>已完成的任务:{completeList.length}个</h2>}list={completeList}handleChecked={handleChecked}/></div>)

列表的组件

function CompleteList({title = '',list = [],handleChecked = function () {},
}) {return (<>{title}<ul>{list.map((item) => {return (<likey={item.id}className={classNames({ [style.active]: item.checked })}><inputtype='checkbox'checked={item.checked}onChange={(e) => handleChecked(e, item.id)}/>{item.task}</li>)})}</ul></>)
}

整体的代码

import { func } from 'prop-types'
import { useState } from 'react'
import { useImmer } from 'use-immer'
import classNames from 'classnames'
import style from './29_实战.module.css'function CompleteList({title = '',list = [],handleChecked = function () {},
}) {return (<>{title}<ul>{list.map((item) => {return (<likey={item.id}className={classNames({ [style.active]: item.checked })}><inputtype='checkbox'checked={item.checked}onChange={(e) => handleChecked(e, item.id)}/>{item.task}</li>)})}</ul></>)
}function Todos() {const [msg, setMsg] = useState('')const [list, setList] = useImmer([])const unCompleteList = list.filter((item) => !item.checked)const completeList = list.filter((item) => item.checked)const handleChange = (e) => {setMsg(e.target.value)}const handleClick = () => {setList((draft) => {draft.unshift({ id: list.length, task: msg, checked: false })})setMsg('')}const handleChecked = (e, id) => {setList((draft) => {draft.find((item) => item.id === id).checked = e.target.checked //更改对应id的数据的复选框状态})}return (<div><input type='text' value={msg} onChange={handleChange} /><button onClick={handleClick}>点击添加任务</button>{/* {未完成的列表} */}<CompleteListtitle={<h2>未完成的任务:{unCompleteList.length}个</h2>}handleChecked={handleChecked}list={unCompleteList}/>{/* {已完成的列表} */}<CompleteListtitle={<h2>已完成的任务:{completeList.length}个</h2>}list={completeList}handleChecked={handleChecked}/></div>)
}
export default Todos

效果：