面试官提问：需求场景：页面上有一个单选框，有是否两个选项：当用户选择是，出现一个输入框，用户可以输入内容，给后端的保存接口传入参数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。这样可以满足需求中提到的要求。
