不推荐用 closest 实现 transfer 数据移动，应基于 targetkeys 和 selectedkeys 状态驱动；右移即添加选中 key 到 targetkeys，全右移用 set 去重合并，dom 交互时用 data-role 锚点替代脆弱选择器。
在穿梭框（Transfer）组件中，不推荐直接依赖 closest 来编排左右两侧数据的移动逻辑。因为 closest 是 DOM 层面的查找方法，而 Transfer 的核心是状态驱动的数据同步，强行用 DOM 路径判断容易导致逻辑脆弱、难以维护，尤其在虚拟滚动、动态渲染或 SSR 场景下极易失效。
明确数据源与选中态才是关键
Transfer 的左右两栏本质是同一份数据源（dataSource）按 targetKeys（右侧 key 列表）划分出的两个子集。移动逻辑应围绕：
-
选中项的 key 集合（通常来自
selectedKeys或 checkbox 状态） -
当前目标栏的 key 列表（左侧为未选中集合，右侧为
targetKeys） -
移动方向的语义操作：如 “右移” = 将左侧选中 key 加入
targetKeys并从其中剔除
用函数式更新替代 DOM 推导
以 Ant Design 的 Transfer 为例，响应 onChange 时直接接收新 targetKeys，无需查 DOM：
const handleChange = (nextTargetKeys) => {
setTargetKeys(nextTargetKeys);
// 数据已自动对齐，无需 closest 找父容器或判断位置
};
若需自定义按钮（如“全部右移”），也只需操作 key 数组：
- 全右移 →
targetKeys = Array.from(new Set([...targetKeys, ...leftKeys])) - 全左移 →
targetKeys = targetKeys.filter(key => !rightKeys.includes(key))
真需要 DOM 交互时，用更稳定的锚点
极少数场景（如拖拽排序、焦点管理）需 DOM 操作，应避免依赖 closest('.ant-transfer-list') 这类易变的选择器。建议：
- 给左右列表容器加唯一
data-role="transfer-source"和data-role="transfer-target" - 用
event.target.closest('[data-role="transfer-target"]')判断落点区域 - 结合
key属性定位具体数据项，而非靠 DOM 层级推断归属
保持受控与非受控的一致性
如果手动管理 selectedKeys，务必确保它与 targetKeys 和 dataSource 实时同步。例如点击某项时：
- 先根据该项
key判断它当前在左还是右 - 再决定是添加还是移除该 key 到
selectedKeys - 不要通过
closest去找它“看起来在哪一栏”，而是查targetKeys.includes(key)
