当前位置：首页 > React

react写穿梭框如何传数据

2026-01-25 16:06:20React

实现React穿梭框数据传递的方法

使用状态管理传递数据 在React中，穿梭框的数据传递通常通过状态管理实现。定义两个数组状态分别表示左侧和右侧的数据源，通过事件处理函数更新这两个状态。

const [leftData, setLeftData] = useState([
  { id: 1, name: '选项1' },
  { id: 2, name: '选项2' }
]);
const [rightData, setRightData] = useState([]);

编写转移数据的方法 创建方法处理从左侧移动到右侧的逻辑，使用filter和concat等方法更新状态数组。需要确保处理选中状态的数据转移。

const moveToRight = (selectedItems) => {
  setRightData(rightData.concat(selectedItems));
  setLeftData(leftData.filter(item => !selectedItems.includes(item)));
};

双向数据绑定 穿梭框通常需要双向数据传递功能，实现从右侧移回左侧的方法。原理与移动到右侧相同，只是方向相反。

const moveToLeft = (selectedItems) => {
  setLeftData(leftData.concat(selectedItems));
  setRightData(rightData.filter(item => !selectedItems.includes(item)));
};

使用第三方库简化实现 考虑使用现成的React穿梭框组件如react-transfer-list或antd Transfer，这些库已经封装了完整的数据传递逻辑。

import { Transfer } from 'antd';

function MyTransfer() {
  const [targetKeys, setTargetKeys] = useState([]);
  const mockData = Array.from({ length: 20 }).map((_, i) => ({
    key: i.toString(),
    title: `内容${i + 1}`
  }));

  return (
    <Transfer
      dataSource={mockData}
      targetKeys={targetKeys}
      onChange={setTargetKeys}
      render={item => item.title}
    />
  );
}

自定义穿梭框组件 如果需要完全自定义实现，可以创建两个列表组件，中间放置操作按钮，通过props传递数据和回调函数。

function CustomTransfer({ leftItems, rightItems, onMoveLeft, onMoveRight }) {
  return (
    <div className="transfer-container">
      <ItemList items={leftItems} onSelect={onMoveRight} />
      <div className="transfer-buttons">
        <button onClick={moveRight}>→</button>
        <button onClick={moveLeft}>←</button>
      </div>
      <ItemList items={rightItems} onSelect={onMoveLeft} />
    </div>
  );
}

处理复杂对象数据 当传递的数据是复杂对象时，确保正确处理对象的引用或深拷贝，避免状态更新时出现意外行为。

const moveItems = (source, target, items) => {
  const newSource = source.filter(item => 
    !items.some(selected => selected.id === item.id)
  );
  const newTarget = [...target, ...items.map(item => ({...item}))];
  return [newSource, newTarget];
};

react写穿梭框如何传数据