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

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

1b13687c16664d68a989b6d074169690.jpg

1ac0dd01a462483e9dc3878170bb6edb.jpg 

10faee66f1424dcc8e96137559cbd29e.jpg 

d9e69c4d41a34cf1ba1b411db965bb78.jpg 

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据集005:螺丝螺母目标检测数据集(含数据集下载链接)

数据集简介 背景干净的目标检测数据集。 里面仅仅包含螺丝和螺母两种类别的目标,背景为干净的培养皿。图片数量约420张,train.txt 文件描述每个图片中的目标,label_list 文件描述类别 另附一个验证集合,有10张图片,e…

【二分查找 位运算】3145. 大数组元素的乘积

本文涉及知识点 二分查找算法合集 位运算、状态压缩、枚举子集汇总 LeetCode3145. 大数组元素的乘积 一个整数 x 的 强数组 指的是满足和为 x 的二的幂的最短有序数组。比方说,11 的强数组为 [1, 2, 8] 。 我们将每一个正整数 i (即1,2&am…

Lookin高效调试iOS App的UI

Lookin是一款iOS开发时常用的调试软件,由腾讯微信读书团队QMUI开发。 它可以查看和修改iOS App里的UI对象的软件,展示App UI图层,类似于Xcode自带的UI Inspector工具,或另一款叫做Reveal的软件。 此外,虽然Lookin主体…

内存泄漏案例分享4-异步任务流内存泄漏

案例4——异步任务内存泄漏 异步任务,代指起子线程异步完成一些数据操作、网络接口请求等,通常会使用以下API: Runnbale,Thread,线程池RxJavaHandlerThread 而这些异步任务很有可能操作内存泄漏,下面我们以Rxjava为…

【实战JVM】-基础篇-02-类的声明周期-加载器

【实战JVM】-基础篇-02-类的声明周期-加载器 3 类的生命周期3.1 生命周期的概述3.2 加载阶段3.2.1 查看内存中的对象 3.3 连接阶段3.3.1 验证阶段3.3.1.1 验证是否符合jvm规范3.3.1.2 元信息验证3.3.1.3 验证语义3.3.1.4 符号引用验证 3.3.2 准备阶段3.3.3 解析阶段 3.4 初始化…

使用OpenCV计算滑块缺口(2)

上一篇 openCV 计算滑块缺口,执行可能出现问题,这一篇文章,是上一版本的补充(https://blog.csdn.net/weixin_42883164/article/details/137604965) 实现计算滑块缺口的步骤: 接口部分参照上述文章&#xf…

创新营销之路:探索订单排队模式的无限可能

随着市场竞争的日益激烈,企业家们都在寻找新的营销策略来脱颖而出。在这里,我想向大家介绍一种充满活力和创新性的营销新模式——订单排队模式。它不仅能够有效提升用户黏性,还能为企业带来持续的增长动力。 一、订单排队模式的魅力 订单排队…

为什么建议大家加快拥抱Kotlin,说点不一样的

本文首发于公众号“AntDream”,欢迎微信搜索“AntDream”或扫描文章底部二维码关注,和我一起每天进步一点点 Kotlin自2017年起被Google正式宣布为Android的编程语言之一,随后在2019年进一步宣布Kotlin为Android的首选语言,普及速度…

上下文视觉提示实现zero-shot分割检测及多visual-prompt改造

文章目录 一、Closed-Set VS Open-set二、DINOv2.1 论文和代码2.2 内容2.3 安装部署2.4 使用效果 三、多visual prompt 改造3.1 获取示例图mask3.2 修改函数参数3.3 推理代码3.4 效果的提升! 四、总结 本文主要介绍visual prompt模型DINOv,该模型可输入八…

深度解析:医院管理全面数字化转型的技术实现与优势

随着科技的飞速发展,信息技术的应用已经渗透到社会的各个角落,医疗行业作为关乎人民群众生命健康的重要领域,更是急需借助科技的力量实现转型升级。在这样的时代背景下,全面数字化转型成为了医院管理创新的必由之路。 北京XXX医院…

linux下宝塔负载100%解决方法

今天发现服务器宝塔面板负载居然是100% 但是cpu 和内存其实并不高 通过命令查看主机 uptime 中load average 居然高达18.23 看来负载是真的高了 通过vmstat 看看具体问题 procs: ​ r 表示运行和等待CPU时间片的进程数,这个值如果长期大于系统CPU个数…

Pytorch深度学习实践笔记9(b站刘二大人)

🎬个人简介:一个全栈工程师的升级之路! 📋个人专栏:pytorch深度学习 🎀CSDN主页 发狂的小花 🌄人生秘诀:学习的本质就是极致重复! 《PyTorch深度学习实践》完结合集_哔哩哔哩_bilibi…

【一竞技CS2】YaLLa 2024邀请TheMongolz和BB

1、近日YaLLa Compass 2024主办方已宣布了最后两支受邀参赛的队伍是TheMongolz和BB两支战队,赛事将于6月5日至9日间在阿联酋阿布扎比的Space 42 Arena举行,总奖金为40万美元。 值得一说的是本次赛事的12支参赛队伍中,Cloud9和FURIA尚未确定参赛阵容。在arT离队后,FURIA让青训队…

LaTex安装及配置(Windows)

LaTex安装及配置(Windows) 安装环境安装texlive下载texlive安装 编辑器安装texstudio下载texstudio安装 环境配置 使用第一个LaTex文档新建文件编程查看results 安装 环境安装 texlive下载 镜像清华源下载地址:https://mirrors.tuna.tsing…

Java通过Html(ftl模板)生成PDF实战, 可支持商用

Java通过Html(freemarker模板)生成PDF实战, 可支持商用 技术架构 springboot freemarker [pdfbox] flying-saucer-pdf 生成流程: freemarker: 根据数据填充ftl模板文件,得到包含有效数据的html文件(包含页眉页脚页码的处理&#xff0c…

InteractiveGraph图谱中vue项目中如何使用

InteractiveGraph图谱中vue项目中如何使用 一、下载js和css和字体二、vue2.0项目中引用三、grap组件 一、下载js和css和字体 //在这里面找 https://github.com/grapheco/InteractiveGraph/blob/master/dist/examples/example1.html二、vue2.0项目中引用 //main.js中全局引入$ …

导入 FDTD 仿真的 S 参数到 INTERCONNECT 的器件中

导入 FDTD 仿真的 S 参数到 INTERCONNECT 的器件中 正文正文 很多时候,仿真链路比较大时,我们可以将仿真的每个部分分隔开来,用 FDTD 计算出每一部分的 S 参数,然后将这些 S 参数导入 INTERCONNECT 中得到最终的仿真结果。这里我们来介绍一下这种方法。 首先,我们从右侧…

Linux系统安装AMH服务器管理面板并实现远程访问管理维护

目录 前言 1. Linux 安装AMH 面板 2. 本地访问AMH 面板 3. Linux安装Cpolar 4. 配置AMH面板公网地址 5. 远程访问AMH面板 6. 固定AMH面板公网地址 1. 部署Docker Registry 2. 本地测试推送镜像 3. Linux 安装cpolar 4. 配置Docker Registry公网访问地址 5. 公网远程…

【链表】Leetcode 92. 反转链表 II【中等】

反转链表 II 给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], left 2, right 4 输出&#x…

Solidity 教程01 Remix IDE 初次见面

访问链接地址&#xff1a; https://remix.ethereum.org/ 文件管理器 文件资源管理器用于管理工作区和文件。此插件还包含许多快捷方式和命令。要快速浏览&#xff0c;请右键单击文件以获取弹出菜单&#xff0c;并检查插件右上角的汉堡菜单。 要找到文件资源管理器模块 - 单…