当前位置：首页 > React

react实现穿梭框

2026-01-27 03:37:28React

React 实现穿梭框组件

穿梭框（Transfer）是常见的 UI 组件，用于在两栏之间移动选项。以下是实现方案：

基础结构设计

使用两个并排的列表展示可选项和已选项，中间放置操作按钮：

<div className="transfer-container">
  <List title="源列表" items={sourceItems} />
  <div className="transfer-buttons">
    <button onClick={moveToRight}>{">"}</button>
    <button onClick={moveToLeft}>{"<"}</button>
  </div>
  <List title="目标列表" items={targetItems} />
</div>

状态管理

使用 React 的 useState 管理数据状态：

const [sourceItems, setSourceItems] = useState([
  { id: 1, label: '选项1' },
  { id: 2, label: '选项2' }
]);
const [targetItems, setTargetItems] = useState([]);
const [selectedKeys, setSelectedKeys] = useState({
  source: [],
  target: []
});

列表组件实现

创建可复用的列表组件，支持多选：

react实现穿梭框

const List = ({ title, items, onSelect }) => (
  <div className="transfer-list">
    <h4>{title}</h4>
    <ul>
      {items.map(item => (
        <li 
          key={item.id}
          className={selectedKeys.includes(item.id) ? 'selected' : ''}
          onClick={() => onSelect(item.id)}
        >
          {item.label}
        </li>
      ))}
    </ul>
  </div>
);

移动逻辑实现

实现选项在左右列表间的移动：

const moveToRight = () => {
  const movingItems = sourceItems.filter(
    item => selectedKeys.source.includes(item.id)
  );
  setSourceItems(sourceItems.filter(
    item => !selectedKeys.source.includes(item.id)
  ));
  setTargetItems([...targetItems, ...movingItems]);
  setSelectedKeys({...selectedKeys, source: []});
};

完整功能增强

添加全选/清空、搜索过滤等增强功能：

react实现穿梭框

// 全选当前列表
const selectAll = (type) => {
  setSelectedKeys({
    ...selectedKeys,
    [type]: items[type].map(item => item.id)
  });
};

// 搜索过滤
const [searchText, setSearchText] = useState('');
const filteredItems = items.filter(
  item => item.label.includes(searchText)
);

样式优化

添加基础 CSS 样式提升交互体验：

.transfer-container {
  display: flex;
  gap: 16px;
}

.transfer-list {
  border: 1px solid #ddd;
  width: 200px;
  height: 300px;
  overflow-y: auto;
}

.transfer-list li.selected {
  background-color: #e6f7ff;
}

.transfer-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
}