穿梭框

import React, { useState } from 'react';

function TransferBox({ data }) {
  const [source, setSource] = useState(data);
  const [target, setTarget] = useState([]);

  const addToTarget = () => {
    const selectedItems = source.filter(item => item.selected);
    setTarget([...target, ...selectedItems]);
    setSource(source.filter(item => !item.selected));
  };

  const addToSource = () => {
    const selectedItems = target.filter(item => item.selected);
    setSource([...source, ...selectedItems]);
    setTarget(target.filter(item => !item.selected));
  };

  return (
    <div>
      <div>
        <h3>Source List</h3>
        <ul>
          {source.map((item, index) => (
            <li key={index}>
              <input type="checkbox" onChange={() => {
                const newData = [...source];
                newData[index].selected = !newData[index].selected;
                setSource(newData);
              }} />
              {item.name}
            </li>
          ))}
        </ul>
        <button onClick={addToTarget}>Add to Target</button>
      </div>
      <div>
        <h3>Target List</h3>
        <ul>
          {target.map((item, index) => (
            <li key={index}>
              <input type="checkbox" onChange={() => {
                const newData = [...target];
                newData[index].selected = !newData[index].selected;
                setTarget(newData);
              }} />
              {item.name}
            </li>
          ))}
        </ul>
        <button onClick={addToSource}>Add to Source</button>
      </div>
    </div>
  );
}

export default TransferBox;