前端面试项目细节重难点（已工作｜做分享）_前端面试项目中遇到的难点

面试官提问：需求场景：页面上有一个单选框，有是否两个选项：当用户选择是，出现一个输入框，用户可以输入内容，给后端的保存接口传入参数radio和content这两个字段，值分别是用户选项和输入内容；当用户选择否，隐藏输入框，给后端的保存接口传入参数radio和content这两个字段，但是content值为null；关键点：用户切换为是选项时，还得保持用户原来输入的内容，你会如何实现那？

答：我的回答：根据您提供的需求背景和实现难点,我们可以探讨一下实现思路:

（1）页面结构和交互:

   - 这个页面包含一个调查问卷的表单,用户可以切换选项并输入内容。

   - 当用户切换选项或输入内容时,需要及时保存数据到后端。

- 原型图如下：

 

 

（2）保存数据的逻辑:

   - 使用一个状态变量来记录用户当前的选择(是/否)。

   - 在保存数据时,根据用户的选择确定要保存的数据:

     - 如果选择"否",则将 `content` 字段设置为 `null` 再保存。

     - 如果选择"是",则保存用户输入的内容。

（3）实现难点:

   - 当用户切换到"否"选项时,需要将页面上的内容保持不变,而不是清空。

   - 这可以通过在状态管理中维护两个字段来实现:

      - `content`: 用于存储当前用户输入的内容。

      - `pendingContent`: 用于存储用户切换"否"选项时的内容,以便在切换回"是"选项时恢复。

（4）实现步骤:

 第1步：在组件状态中添加 `selectedOption` 和 `pendingContent` 两个字段。

第2步：在切换选项时,更新 `selectedOption` 状态。

第3步：在输入内容时,更新 `content` 状态。

第4步：在保存数据时,根据 `selectedOption` 的值决定是否将 `content` 设置为 `null`。

第5步：在切换回"是"选项时,将 `pendingContent` 的值赋给 `content`。

（5）代码实现：

这个实现中,我们使用 `useState` hooks 来管理页面状态。当用户切换选项时,我们会更新 `selectedOption` 状态,并根据选择情况更新 `content` 和 `pendingContent` 状态。在保存数据时,我们根据 `selectedOption` 的值决定是否将 `content` 设置为 `null`。这样可以满足需求中提到的要求。