member-management-system-excel-bZt_e-eS/src/App.jsx

import React, { useState } from 'react';
import MemberList from './components/MemberList';
import MemberForm from './components/MemberForm';
import ExcelImportExport from './components/ExcelImportExport';

function App() {
  const [members, setMembers] = useState([]);
  const [editingMember, setEditingMember] = useState(null);

  const addMember = (member) => {
    setMembers([...members, { ...member, id: Date.now() }]);
  };

  const updateMember = (updatedMember) => {
    setMembers(members.map(m => m.id === updatedMember.id ? updatedMember : m));
    setEditingMember(null);
  };

  const deleteMember = (id) => {
    setMembers(members.filter(m => m.id !== id));
  };

  const handleImport = (importedMembers) => {
    setMembers([...members, ...importedMembers.map(m => ({ ...m, id: Date.now() + Math.random() }))]);
  };

  return (
    <div className="App">
      <h1>会友信息管理系统</h1>
      <ExcelImportExport members={members} onImport={handleImport} />
      <MemberForm onSubmit={editingMember ? updateMember : addMember} initialData={editingMember} />
      <MemberList
        members={members}
        onEdit={setEditingMember}
        onDelete={deleteMember}
      />
    </div>
  );
}

export default App;