React受控组件：解决输入框占位符与数据同步问题

import { useState, useEffect } from "react";
import TeamManagement from "./TeamManagement";
import TeamDetails from "./TeamDetails";

export default function Home() {
  const [currentTeam, setCurrentTeam] = useState({} as any); // 存储当前团队对象
  const [isAddTeamMode, setIsAddTeamMode] = useState(true);
  const [teams, setTeams] = useState([
    // ... 初始团队数据，增加 teamMember 属性以匹配 TeamDetails 的 select
    { id: 1, name: "FINANCE", teamLead: "John Doe", description: "finance department description", status: "active", teamMember: "member1" },
    { id: 2, name: "NUTRITION", teamLead: "Mike Green", description: "Nutrition department description", status: "active", teamMember: "member2" },
    { id: 3, name: "PROCUREMENT", teamLead: "Dave Brown", description: "Procurement department description", status: "active", teamMember: "member3" },
    { id: 4, name: "EQUIPMENT SERVICES", teamLead: "Jim Jones", description: "Equipment Services description", status: "active", teamMember: "member1" },
    { id: 5, name: "SITE BASED OPERATIONS", teamLead: "Steve Smith", description: "Site based operations description", status: "active", teamMember: "member2" },
  ]);

  // 当 TeamManagement 组件选择一个团队时调用
  function handleTeamDetails(team: any) {
    setCurrentTeam(team);
    setIsAddTeamMode(true); // 切换到查看模式
  }

  // 点击“Add Team”按钮时调用
  function addTeam() {
    setIsAddTeamMode(false); // 切换到添加模式
    setCurrentTeam({ // 清空 currentTeam，准备添加新团队
      name: "",
      teamLead: "",
      description: "",
      status: "",
      teamMember: "", // 确保包含所有表单字段
    });
  }

  // 保存新团队时调用
  function saveTeam(updatedTeamDetails: any) {
    const newTeamId = teams.length + 1;
    const newTeam = {
      id: newTeamId,
      ...updatedTeamDetails, // 使用解构赋值简化
    };
    setTeams([...teams, newTeam]);
    setIsAddTeamMode(true); // 返回查看模式
    setCurrentTeam({}); // 清空 currentTeam，或者设置为新添加的团队
  }

  // 取消保存时调用
  function cancelSave() {
    setIsAddTeamMode(true); // 返回查看模式
    setCurrentTeam({}); // 清空 currentTeam
  }

  return (
    <div>
      <h2>Hello World!</h2>
      <div style={{ display: "flex" }}>
        <TeamManagement
          setTeam={handleTeamDetails} // 传递 setTeam 方法
          teams={teams}
          addTeam={addTeam}
        />
        <TeamDetails
          team={currentTeam} // 传递完整的 currentTeam 对象
          isAddTeamMode={isAddTeamMode}
          cancelSave={cancelSave}
          onSaveTeam={saveTeam}
        />
      </div>
    </div>
  );
}

import { useEffect, useState } from "react";

interface Props {
  team: any; // 现在接收完整的团队对象
  isAddTeamMode: boolean;
  cancelSave: any;
  onSaveTeam: any;
}

export default function TeamDetails(props: Props) {
  const [updatedTeamDetails, setUpdatedTeamDetails] = useState({
    name: "",
    teamLead: "",
    description: "",
    status: "",
    teamMember: "", // 确保所有表单字段都在初始状态中
  } as any);

  // 使用 useEffect 钩子来同步 props.team 到组件内部状态
  useEffect(() => {
    // 当 props.team 变化时，更新 updatedTeamDetails
    // 确保处理 undefined 或 null 的情况，提供默认值
    setUpdatedTeamDetails({
      name: props.team?.name || "",
      teamLead: props.team?.teamLead || "",
      description: props.team?.description || "",
      status: props.team?.status || "",
      teamMember: props.team?.teamMember || "",
    });
  }, [props.team]); // 依赖项是 props.team

  const resetForm = () => {
    setUpdatedTeamDetails({
      name: "",
      teamLead: "",
      description: "",
      status: "",
      teamMember: "",
    });
  };

  const handleSaveTeam = () => {
    props.onSaveTeam(updatedTeamDetails);
    resetForm(); // 保存后清空表单
  };

  return (
    <div className="team-details">
      <div>
        <h4>Team Details: {props.team?.name || "New Team"}</h4> {/* 显示当前团队名称或“New Team” */}
      </div>

      <div style={{ display: "flex", flexDirection: "column" }}>
        <label htmlFor="teamNameInput">Team Name:</label>
        <input
          type="text"
          id="teamNameInput"
          value={updatedTeamDetails.name} // 使用 value 属性
          disabled={props.isAddTeamMode}
          onChange={(e) =>
            setUpdatedTeamDetails({
              ...updatedTeamDetails,
              name: e.target.value,
            })
          }
        />

        <label htmlFor="teamLeadInput">Team Lead:</label>
        <input
          type="text"
          id="teamLeadInput"
          value={updatedTeamDetails.teamLead} // 使用 value 属性
          disabled={props.isAddTeamMode}
          onChange={(e) =>
            setUpdatedTeamDetails({
              ...updatedTeamDetails,
              teamLead: e.target.value,
            })
          }
        />

        <label htmlFor="descriptionInput">Description:</label>
        <input
          type="text"
          id="descriptionInput"
          value={updatedTeamDetails.description} // 使用 value 属性
          disabled={props.isAddTeamMode}
          onChange={(e) =>
            setUpdatedTeamDetails({
              ...updatedTeamDetails,
              description: e.target.value,
            })
          }
        />

        <label htmlFor="statusInput">Status:</label>
        <input
          type="text"
          id="statusInput"
          value={updatedTeamDetails.status} // 使用 value 属性
          disabled={props.isAddTeamMode}
          onChange={(e) =>
            setUpdatedTeamDetails({
              ...updatedTeamDetails,
              status: e.target.value,
            })
          }
        />

        <label htmlFor="teamMembersSelect">Team Members:</label>
        <select
          id="teamMembersSelect"
          value={updatedTeamDetails.teamMember} // 使用 value 属性
          disabled={props.isAddTeamMode}
          onChange={(e) =>
            setUpdatedTeamDetails({
              ...updatedTeamDetails,
              teamMember: e.target.value,
            })
          }
        >
          <option value="">Select a member</option> {/* 添加一个默认的空选项 */}
          <option value="member1">Member 1</option>
          <option value="member2">Member 2</option>
          <option value="member3">Member 3</option>
        </select>
      </div>

      <div style={{ display: "flex", margin: "10px", justifyContent: "space-between" }}>
        <div>
          <button
            onClick={(e) => {
              e.stopPropagation();
              handleSaveTeam();
            }}
          >
            Save
          </button>
        </div>
        <div>
          <button onClick={props.cancelSave}>Cancel</button>
        </div>
      </div>
    </div>
  );
}

import { Accordion } from "react-bootstrap";

interface Props {
  setTeam: any; // 现在接收完整的团队对象
  teams: any;
  addTeam: any;
}

export default function TeamManagement(props: Props) {
  const setTeam = (team: any) => {
    props.setTeam(team); // 直接传递团队对象
  };

  return (
    <div className="team-management">
      <div>
        <h4>Team Management</h4>
      </div>
      <div>
        <button onClick={props.addTeam}>Add Team</button>
      </div>
      <div>
        {props.teams.map((team: any) => (
          <Accordion key={team.id} defaultActiveKey="0">
            <Accordion.Item eventKey={team.id.toString()} onClick={() => setTeam(team)}> {/* 使用 team.id 作为 eventKey */}
              <Accordion.Header>{team.name}</Accordion.Header>
            </Accordion.Item>
          </Accordion>
        ))}
      </div>
    </div>
  );
}