企业官网建设流程全解析

• 前端
• UI组件

renderExtraFooter是 rsuiteCheckPicker提供的弹层底部自定义插槽，用于在选项列表下方渲染任意内容，最常见的场景是在多选下拉中内置「全选 / 取消全选」与「确定（关闭）」操作。本文以 extra-footer.md 中的完整示例为骨架，结合 CheckPicker.tsx 与 PickerPopup.tsx 的源码实现，讲解如何用受控值 +Checkbox半选状态 +Button构建一个可复用的全选底部工具栏，并给出可复制运行的完整代码。

一、renderExtraFooter 是什么

从 CheckPicker 属性表 可以看到，renderExtraFooter的类型签名为：

renderExtraFooter?: () => ReactNode

它接收一个返回ReactNode的函数，渲染位置在弹层（Popup）的列表（listbox）之后。查看 CheckPicker.tsx 中renderPopup的实现，弹层结构依次为：

1. 搜索框（searchable开启时渲染SearchBox）；
2. 选项列表（可被renderListbox替换）；
3. renderExtraFooter?.()—— 底部自定义区域。

也就是说，底部工具栏始终固定在弹层最下方、选项列表之外，不随列表滚动，天然适合放置全选、确定、清空等操作按钮。

二、完整示例：全选 + 确定 的底部工具栏

以下代码即 extra-footer.md 中的核心示例，可直接复制运行：

import { CheckPicker, Checkbox, Button, HStack } from 'rsuite'; const data = ['Eugenia', 'Bryan', 'Linda', 'Nancy', 'Lloyd', 'Alice', 'Julia', 'Albert'].map( item => ({ label: item, value: item }) ); const allValue = data.map(item => item.value); const App = () => { const picker = React.useRef(); const [value, setValue] = React.useState([]); const handleChange = value => { setValue(value); }; const handleCheckAll = (value, checked) => { setValue(checked ? allValue : []); }; return ( <div className="example-item"> <CheckPicker data={data} placeholder="Select" ref={picker} w={224} value={value} onChange={handleChange} renderExtraFooter={() => ( <HStack justifyContent="space-between" px={12} py={4} bdt="1px solid var(--rs-border-primary)" > <Checkbox indeterminate={value.length > 0 && value.length < allValue.length} checked={value.length === allValue.length} onChange={handleCheckAll} > Check all </Checkbox> <Button appearance="primary" size="sm" onClick={() => { picker.current.close(); }} > Ok </Button> </HStack> )} /> </div> ); }; ReactDOM.render(<App />, document.getElementById('root'));

示例基于 8 条人员数据（Eugenia、Bryan、Linda、Nancy、Lloyd、Alice、Julia、Albert），data被映射为{ label, value }结构——这正是 CheckPicker 默认读取的labelKey与valueKey（默认值均为'label'/'value'，见 CheckPicker.tsx）。

三、核心实现要点拆解

3.1 受控 value 驱动全选逻辑

示例使用useState管理value，并通过value/onChange将 CheckPicker 变为受控组件：

• handleChange把选择结果写回 state；
• handleCheckAll(value, checked)根据checked布尔值一键写入allValue（全选）或[]（清空）。

allValue由data.map(item => item.value)预先计算，与数据源保持一致。从源码看，CheckPicker 内部通过useControlled(valueProp, defaultValue || [])（CheckPicker.tsx）同步受控值，用户每勾选一项都会触发handleItemSelect→setValue→handleChangeValue→onChange（CheckPicker.tsx），因此 footer 中的value永远是最新的选择状态。

3.2 用 indeterminate 表达「部分选中」

Checkbox的选中状态分三档：

• checked={value.length === allValue.length}：全部选中时勾选；
• indeterminate={value.length > 0 && value.length < allValue.length}：选中一部分时显示半选横线；
• 两者都为false：未选中任何项。

查看 Checkbox.tsx，indeterminate会通过useIndeterminateCheckbox钩子反射到原生 input 的indeterminate属性，同时aria-checked被置为'mixed'（Checkbox.tsx），保证无障碍语义正确。

3.3 通过 ref 调用 close 关闭弹层

ref={picker}拿到的是 CheckPicker 的实例句柄（PickerHandle），点击「Ok」按钮时调用picker.current.close()直接关闭弹层。这一能力来自 Picker 内部统一的 PickerHandle 接口，由usePickerRef组装而成（CheckPicker.tsx）。

3.4 HStack 快速布局

底部工具栏使用HStack做横向布局：

• justifyContent="space-between"：左「全选」、右「Ok」两端对齐；
• px={12} py={4}：内边距；
• bdt="1px solid var(--rs-border-primary)"：顶部 1px 边框，与弹层视觉分隔，颜色取 rsuite 主题变量--rs-border-primary，可随主题自动切换。

HStack是 rsuite 基于 Flexbox 的快速布局组件（Stack.tsx），px/py/bdt这类简写样式属性来自其继承的Box能力，无需手写内联样式或额外 CSS 类。

四、与文档其它入口的组合使用

renderExtraFooter与 CheckPicker 的其他能力天然兼容，常见组合包括：

五、无障碍与键盘交互

给底部工具栏加功能时不要破坏 CheckPicker 已有的无障碍约定（详见 en-US/index.md）：

• 弹层本体是combobox，选项列表为listbox，带aria-multiselectable=true；
• Checkbox的indeterminate状态会自动输出aria-checked="mixed"；
• 键盘支持↓/↑移动焦点、Enter选中、Esc关闭列表，footer 内的Button保持原生可聚焦，不影响现有键盘操作链路。

六、小结

renderExtraFooter让 CheckPicker 的多选体验从「选完手动点外部按钮」升级为「弹层内一站式完成全选与确认」。实现时只需记住三个关键点：

1. 保持受控：value+onChange让 footer 内组件与选项列表共享同一份选择状态；
2. 三档勾选：用checked/indeterminate表达全选、半选、未选三种状态；
3. ref 收尾：通过picker.current.close()让「Ok」按钮完成确认并关闭弹层。

该模式同样适用于SelectPicker、TreePicker、CheckTreePicker等同样支持renderExtraFooter的 Picker 组件族，一处掌握、处处复用。

• 前端
• UI组件