Ant Design Transfer组件单选改造后targetKeys控制失效问题

问题根源 #

1. 选中项控制逻辑混乱：原onSelectChange未严格保证单选规则，可能导致同时选中多个项，移动时一次性添加多个内容到右侧目标列。
2. 移动处理逻辑漏洞：原onChange仅依赖nextTargetKeys的最后一个元素，未区分移动方向（左→右/右→左），也未和本次移动的具体项联动，导致状态更新不符合预期。

修正后的代码实现 #

1. 修复选中项控制逻辑 #

确保全局仅能选中单个项，始终保留最后一次选中的key：

const onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
  if (enableSelectAll) {
    setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
  } else {
    // 优先取右侧选中项，无则取左侧最后选中的单个key
    const lastSelected = targetSelectedKeys[targetSelectedKeys.length - 1] 
      || sourceSelectedKeys[sourceSelectedKeys.length - 1];
    setSelectedKeys(lastSelected ? [lastSelected] : []);
  }
};

2. 修复移动处理逻辑 #

精准控制右侧目标列仅保留单个项：

const onChange = (nextTargetKeys, direction, movedKeys) => {
  if (direction === 'right') {
    // 右移时，仅保留本次移动的最后一个项，替换原有右侧内容
    setTargetKeys([movedKeys[movedKeys.length - 1]]);
  } else {
    // 左移时，直接清空右侧目标列
    setTargetKeys([]);
  }
};

3. 完整组件使用代码 #

<Transfer
  dataSource={data}
  titles={['Source', 'Target']}
  listStyle={{ width: 250, height: 340 }}
  targetKeys={targetKeys}
  selectedKeys={selectedKeys}
  onSelectChange={onSelectChange}
  onChange={onChange}
  render={renderItem}
  showSelectAll={enableSelectAll}
/>

关键说明 #

• 单选核心：通过onSelectChange严格限制选中项数量为1，从根源避免一次性移动多个项到右侧。
• 精准状态控制：利用onChange提供的direction（移动方向）和movedKeys（本次移动的key数组），直接针对本次操作更新状态，而非依赖移动后的全量数组，避免状态冲突。
• 受控组件规则：Transfer是受控组件，必须保证targetKeys和selectedKeys完全由外部状态管理，确保组件渲染和状态一致。

内容的提问来源于stack exchange，提问作者Jdfcc