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

本文主要是介绍react经验8:使用antd的checkbox实现全选与半选控制，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

实现步骤

列表项类型

declare type TableRow = {key: Keytitle: stringisSelected?: 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).lengthreturn 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>