useMultiSelect

一个管理多选状态的 React 钩子。

演示

源码

Choose your favorite fruits

All selected:
false
Partially selected:
false
None selected:
true
Is Melon selected:
false
Selected:

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

API

const [state, actions] = useMultiSelect(list, defaultSelected)

列表 List

要管理多选状态的项目列表。

默认选中 DefaultSelected

默认选中的项目列表。

返回值

export interface UseMultiSelectReturnsState<T> { /** * 选中的项目 */ selected: T[] /** * 是否没有选中任何项目 */ isNoneSelected: boolean /** * 是否所有项目都被选中 */ isAllSelected: boolean /** * 是否部分选中 */ isPartiallySelected: boolean } export interface UseMultiSelectActions<T> { /** * 检查项目是否被选中 */ isItemSelected: (item: T) => boolean /** * 设置选中的项目 */ setSelected: ReactSetState<T[]> /** * 选中项目 */ select: (item: T) => void /** * 选中所有项目 */ selectAll(): void /** * 取消选中项目 * * @deprecated 请使用 `unselectAll` 代替 */ unSelect: (item: T) => void /** * 取消选中所有项目 * * @deprecated 请使用 `unselectAll` 代替 */ unSelectAll(): void /** * 取消选中项目 */ unselect: (item: T) => void /** * 取消选中所有项目 */ unselectAll(): void /** * 切换项目的选中状态 */ toggle: (item: T) => void /** * 切换所有项目的选中状态 */ toggleAll(): void } export type UseMultiSelectReturns<T> = readonly [UseMultiSelectReturnsState<T>, UseMultiSelectActions<T>]