react经验8:使用antd的checkbox实现全选与半选控制

淘人居士

于 2023-12-14 09:39:30 发布

阅读量862

点赞数 7

分类专栏： web前端文章标签：前端 react

本文链接：https://blog.csdn.net/kw269937519/article/details/134987123

版权

web前端专栏收录该内容

28 篇文章 2 订阅

订阅专栏

预期实现的效果
在这里插入图片描述
列表项部分选中时，checkall处于半选状态，点击checkall要么全选，要么全不选。

实现步骤

列表项类型

declare type TableRow = {
    key: Key
    title: string
    isSelected?: boolean
}

示范数据

const [tabledata, setTabledata] = useState<TableRow[]>([])
useEffect(()=>{
	setTabledata([
		{key:1,title:'Apple'},
		{key:2,title:'Pear'},
		{key:3,title:'Orange'}
	])
},[])

核心控制函数

//半选状态
const halfChecked = useMemo(() => {
        if (!tabledata.length) {
            return false
        }
        let checkeds = tabledata.filter(d => d.isSelected).length
        return checkeds > 0 && checkeds < tabledata.length
    }, [tabledata])
//全选状态
const allChecked = useMemo(() => {
    if (!tabledata.length) {
        return false
    }
    return tabledata.every(d => d.isSelected)
}, [tabledata])
//全选控制，点一下全选或全不选
function handleCheckAll(e: CheckboxChangeEvent) {
        if (e.target.checked) {
            tabledata.forEach(d => d.isSelected = true)
        } else {
            tabledata.forEach(d => d.isSelected = false)
        }
        setTabledata([...tabledata])
}
//列表项选中改变事件
function handleItemSelect(item:TableRow){
	item.isSelected =!item.isSelected 
	setTabledata([...tabledata])
}

视图部分

<Checkbox indeterminate={halfChecked} checked={allChecked} onChange={handleCheckAll}>Check All</Checkbox>
<ul>
{
	tabledata.map(row=>(
		<li key={row.key}>
			<Checkbox checked={row.isSelected} onChange={()=>handleItemSelect(row)}>{row.title}</Checkbox>
		</li>
	))
}
</ul>