前端面试项目细节重难点(已工作|做分享)

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

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

(1)页面结构和交互:

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

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

- 原型图如下:

c7c784eac6c2496290a23f3d88197fdc.png

6238545df2b04d399751e6ff12cfcc45.png 

a5f8781e1494463c9253529bd0127c04.png 

(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`。这样可以满足需求中提到的要求。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/637171.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

西门子WINCC8.0VBS脚本学习讲解

WinCC VBS脚本置位/复位/取反 二进制变量 "TAG1_BOOL1" 进行置位复位取反操作 步骤:按钮-->对象属性-->事件-->单击鼠标VBS动作填入代码如下: 对二进制变量进行复位 对二进制变量进行置位 对二进制变量进行取反 VBS脚本数学运算/读写批处理 …

百度智能云参与信通院多项边缘计算标准编制,「大模型时代下云边端协同 AI 发展研讨会」成功召开

1 中国信通院联合业界制定、发布多项标准化成果,推动产业发展 大模型开启了 AI 原生时代,云边端协同 AI 构建了「集中式大规模训练」、「边缘分布式协同推理」新范式,有效降低推理时延和成本,提升数据安全和隐私性,也…

安卓App封装全攻略:利用小猪APP分发提升应用发布效率

在快速迭代的移动应用市场,高效且安全地分发安卓应用程序是开发者面临的一大挑战。安卓App封装技术,作为这一挑战的解决方案之一,不仅能够提升应用的安全性,还能简化分发流程。本文将深入探讨安卓App封装的核心概念,以…

小型发电机不发电原因和解决方法

小型发电机不发电可能由多种原因造成,以下是一些常见原因及其解决方法: 1.电池电量不足:小型发电机通常需要电池来启动。如果电池电量不足,可能导致发电机无法启动。此时,您可以使用充电设备对电池进行充电&#xff0…

2025秋招深度学习基础面试题(一)

01. 卷积和BN如何融合提升推理速度 Conv和BN的融合:在网络的推理阶段,可以将BN层的运算融合到Conv层中,减少运算量,加速推理。本质上是修改了卷积核的参数,在不增加Conv层计算量的同时,略去了BN层的计算量。def fuse_conv_bn(conv, bn):std = (bn.running_var + bn.eps).…

深入解读TuGraph计算引擎模型推理系统

作者:李文凯 TuGraph计算引擎模型推理系统将基于迭代计算的图计算框架与模型推理系统相结合,推理系统可自定义推理依赖环境,图迭代计算与推理链路实现隔离。基于共享内存的跨进程通信方式,提高了推理数据交换效率,满足…

VUE3好看的酒网站模板源码

文章目录 1.设计来源1.1 首页界面1.2 十大名酒界面1.3 名酒新闻界面1.4 联系我们界面1.5 在线留言界面 2.效果和结构2.1 动态效果2.2 代码结构 3.VUE框架系列源码4.源码下载 作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43151418/article/detai…

2024/5/22 学习杂记

为什么功率放大电路在模电中经常提到? 模拟信号:它是连续变化的电信号,它在时间上和幅度上都是连续的,能够代表信息的连续变化。大多数物理量为模拟信号,如:温度、压力、流量… 非电物理量通过传感器变换成…

Nginx - 健康检查终极指南:探索Upstream Check模块

文章目录 概述upstream_check_module模块安装和配置指南模块安装步骤基本配置示例详细配置说明检查类型和参数常见问题及解决方案 SSL检查和DNS解析功能SSL检查配置示例和说明配置示例 DNS解析配置示例和说明配置示例 结合实际应用场景的高级配置示例综合SSL检查与DNS解析 总结…

Discourse 中可能使用的 HMAC 算法 Java 实现

在 DiscourseConnect 中,对数据的签名使用的是 HMAC 算法。 实际使用的算法为 HmacSHA256。 Java 生成签名的方法很简单。 String hmac new HmacUtils(HmacAlgorithms.HMAC_SHA_256, "55619458534897682511405307018226").hmacHex(ssoPayload);HmacUti…

robosuite导入自定义机器人

目录 目的:案例一:成果展示具体步骤:URDF文件准备xml文件生成xml修改机器人构建 目的: 实现其他标准/非标准机器人的构建 案例一: 成果展示 添加机器人JAKA ZU 7 这个模型 具体步骤: URDF文件准备 从…

在深度学习中常见的初始化操作

目录 截断正态分布来初始化张量 逐行代码解释 相关理论解释 截断正态分布函数 截断正态分布的定义 截断正态分布的作用 计算截断点的作用 具体步骤 正态分布的累积分布函数(CDF) 正态分布的累积分布函数与误差函数的关系 示例计算 误差函数 应…

切换分支报错:Untracked Files Prevent Checkout

切换分支报错:Untracked Files Prevent Checkout 分支切换 Untracked Files Prevent Checkout 新起的项目在切换master分支到工作分支时,出现下图的问题: Untracked Files Prevent Checkout Move or commit them before checkout 网上的解决…

pip(包管理器) for Python

pip是什么 pip是Python的包安装程序,即python包管理器。您可以使用 pip 从Python包索引和其他索引安装包。 1. pip 安装 python 包 pip install 包名 例如:pip install pymssql : 使用pip安装数据库驱动包 pymssql 2.pip 卸载 python 包 pi…

数据结构2(初):顺序表和链表

目录 1、线性表 2、顺序表 2.1、概念及结构 2.2、顺序表的实现 2.3、顺序表的问题及思考 3、链表 3.1、链表的概念及结构 3.2、链表的分类 3.3、无头单向非循环链表的实现 3.4、带头双向循环链表的实现 4、顺序表和链表的区别和联系 1、线性表 线性表是n个具有相同特…

200+有趣的HTML前端游戏项目合集(5月17日更新,持续更新中)

💂 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】🤟 一站式轻松构建小程序、Web网站、移动应用:👉注册地址🤟 基于Web端打造的:👉轻量化工具创作平台💅 想寻找共同学习交…

工作干到抑郁了,要不要辞职?

在知乎上看到以为网友提问:工作干到抑郁,该不该辞职? 今天和大家聊聊这个话题,如果你也有类似的情况,希望这篇文章能帮到你。 熟悉瑶琴的朋友,都知道瑶琴在去年有一次裸辞的经历。离职前,严重的…

多台Centos快速区分,让Centos开机自动显示它的IP地址!

背景说明:当公司拥有多台Centos服务器,管理员很容易弄混淆导致不好区分,在这样的情况下我们可以写个简单脚本来实现开机自动显示它的IP地址,从而达到区分开来的结果! 首先我们来开下效果,登录之前的 下面是…

【加密与解密(第四版)】第十八章笔记

第十八章 反跟踪技术 18.1 由BeginDebugged引发的蝴蝶效应 IsDebuggerPresent()函数读取当前进程PEB中的BeginDebugged标志 CheckRemoteDebuggerPresent() 反调试总结:https://bbs.kanxue.com/thread-225740.htm https://www.freebuf.com/articles/others-articl…