Props 实现多选框全选联动方法

本文深入解析了如何通过受控组件模式实现多选框的全选联动功能：父组件统一管理全选状态（checkedAll）和已选项列表，子组件仅负责渲染与事件透传；利用 ref 动态设置全选框的 indeterminate 属性精准呈现半选态（短横线），并通过精简的两个回调接口（onCheckAllChange 和 onItemCheck）确保数据流单向闭环、逻辑清晰可维护——既解决了全选/取消全选的同步难题，又提升了用户对选择状态的直观感知，是构建高质量表单交互的实用方案。

用一个 prop 控制全选状态

核心是把“全选”状态抽成一个受控的 prop，比如 checkedAll。它不自己维护状态，而是由父组件决定是否勾选所有选项。子组件（多选框组）只负责把当前是否全选的结果告诉父组件，再根据父组件传来的 checkedAll 去同步每个 checkbox 的 checked 状态。

配合 items prop 渲染选项并响应变化

把选项列表作为 items prop 传入，每个 item 至少带 id 和 label。组件内部不存副本，直接遍历渲染。当某个 checkbox 变更时，检查当前已选 id 列表是否等于全部 item 的 id 列表——相等就触发 onCheckAllChange(true)，否则触发 onCheckAllChange(false)。注意：用户手动取消某一项时，要立刻让 checkedAll 变为 false，哪怕之前是 true。

处理半选态（indeterminate）提升体验

当部分选项被选中、但非全部时，全选框应显示为“短横线”状态（indeterminate）。这个状态不能靠 checked 控制，得用 ref 操作 DOM：
- 用 useRef 拿到全选 checkbox 的 DOM 节点
- 在 useEffect 里根据已选项数量动态设置 node.indeterminate = (checkedCount > 0 && checkedCount
- 注意：indeterminate 是只读属性，只能通过 JS 设置，不能写在 JSX 的 input 标签上

统一事件回调，避免逻辑分散

对外只暴露两个关键回调：
- onCheckAllChange(checked: boolean)：全选框被点击时调用，通知父组件是否应全选/全不选
- onItemCheck(id: string, checked: boolean)：单个选项变更时调用，传回 id 和最新状态
父组件收到这两个回调后，在同一处更新自己的 state（比如 selectedIds 数组），再重新计算 checkedAll 和 indeterminate 状态，实现数据流单向闭环。

以上就是《Props 实现多选框全选联动方法》的详细内容，更多关于的资料请关注golang学习网公众号！