使用react功能组件添加和删除两个集合

import React, { useState } from 'react';

function CollectionComponent() {
  const [collectionA, setCollectionA] = useState([]);
  const [collectionB, setCollectionB] = useState([]);

  const addToCollectionA = (item) => {
    setCollectionA([...collectionA, item]);
  };

  const addToCollectionB = (item) => {
    setCollectionB([...collectionB, item]);
  };

  const removeFromCollectionA = (index) => {
    const updatedCollectionA = [...collectionA];
    updatedCollectionA.splice(index, 1);
    setCollectionA(updatedCollectionA);
  };

  const removeFromCollectionB = (index) => {
    const updatedCollectionB = [...collectionB];
    updatedCollectionB.splice(index, 1);
    setCollectionB(updatedCollectionB);
  };

  return (
    <div>
      <h2>Collection A</h2>
      <ul>
        {collectionA.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => removeFromCollectionA(index)}>Remove</button>
          </li>
        ))}
      </ul>
      <input type="text" onChange={(e) => addToCollectionA(e.target.value)} />
      
      <h2>Collection B</h2>
      <ul>
        {collectionB.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => removeFromCollectionB(index)}>Remove</button>
          </li>
        ))}
      </ul>
      <input type="text" onChange={(e) => addToCollectionB(e.target.value)} />
    </div>
  );
}

export default CollectionComponent;

import React from 'react';
import CollectionComponent from './CollectionComponent';

function App() {
  return (
    <div>
      <h1>React Collection Example</h1>
      <CollectionComponent />
    </div>
  );
}

export default App;