9、React 项目开发：从基础到高级优化

React 项目开发：从基础到高级优化

1. 学生报名表单功能完善

在学生报名表单项目中，当前点击编辑图标时，对应行的详细信息会显示在表单中供编辑，同时按钮文本变为“Update”。若进行修改并点击“Update”，相应行将更新；若点击“Cancel”，表单将清空，之后按钮文本会重置为“Enrol”。不过，目前仅能编辑学生详细信息，课程和座位详情的更新功能尚未完成。

学生分为本科（Undergraduate）和研究生（Postgraduate）两类课程。当添加并编辑研究生学生时，单选按钮可能未正确选中“研究生”选项。这是因为仅向报名表单发送了所选学生的详细信息，未向 App 组件发送数据以选择学生对应的课程。并且，当学生在本科和研究生课程之间切换时，需要更新座位信息。

为解决这些问题，需进行以下操作：
- 引入新的状态变量 ：在 App.js 中引入两个新的状态变量：

const [isUGChecked, setIsUGChecked] = useState(true);
const [isRestoreSeats, setIsRestoreSeats] = useState(false);

isUGChecked 用于处理单选按钮的选中状态，初始值为 true ，表示默认选中“本科”； isRestoreSeats 用于正确更新座位数量。
- 更新单选按钮的 <li&