9、React 前端应用开发与优化-优快云博客

本文链接：https://blog.youkuaiyun.com/opencv7vision/article/details/150088727

React 前端应用开发与优化

学生信息管理功能完善

在学生信息管理的应用中，编辑功能有了进一步的完善。当点击编辑图标时，对应行的详细信息会显示在表单中，同时按钮文本变为“Update”。若对信息进行修改后点击“Update”，相应行的信息会更新；若点击“Cancel”，表单会被清空，之后按钮文本会重置为“Enrol”。不过，目前仅能编辑学生的详细信息，课程和座位信息的更新功能还未完全实现。

为了实现课程和座位信息的更新，我们需要进行一系列操作：
1. 引入新的状态变量 ：在 App.js 中引入两个新的状态变量，代码如下：

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

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

更新单选按钮的 <li> 标签 ：

<li className="parentLabels" onChange={handleCh