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

面试官提问:需求场景:页面上有一个单选框,有是否两个选项:当用户选择是,出现一个输入框,用户可以输入内容,给后端的保存接口传入参数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,一经查实,立即删除!

相关文章

[前端] 爷孙组件隔代组件的通信 (笔记,持续更新)

参考文献 记一次爷孙组件隔代组件的通信之emit与on

热点不等人!运营必须掌握的4大技巧

作为运营,抓住热点是吸引读者关注和增加曝光率的有效手段。但是,你知道怎么样才能更好地追热点吗? 今天,就分享四个追热点的技巧,帮助你更好地利用热点话题来提高账号热度。 1、短期内求快 对于运营者来说&#xff…

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

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

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

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

Cocos Creator 声音播放与管理详解

Cocos Creator 是一款非常流行的游戏开发引擎,它提供了丰富的功能和工具,让开发者可以轻松构建出高质量的游戏。在游戏开发中,声音是一个非常重要的元素,可以为游戏增添氛围和趣味性。在本文中,我们将详细介绍Cocos Cr…

React hooks - useState

useState 用法特点注意事项 在hooks出现之前,react的函数式组件也叫做无状态组件(函数里面无法创建属于自己的状态,只能使用props接收) 用法 一个管理状态的 hooks,能让函数组件拥有自己的状态,实现状态的…

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的首选语言,普及速度…

京东商品API接口:电商数据自动化的钥匙

在电子商务的蓬勃发展中,京东作为中国领先的电商平台之一,提供了丰富的API接口,使得开发者能够访问和利用其庞大的商品数据。京东商品API接口不仅为商家提供了便捷的商品管理工具,也为数据分析和电商自动化提供了强大支持。 一、…

上下文视觉提示实现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,该模型可输入八…

使用selenium实现网页的自动化登录

1.jdk版本(jdk11) 2.检查->元素->查看输入框Id 3.代码 import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.edge.EdgeDriver; import org.openqa.selen…

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

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

untiy tmp textmeshPro text 代码设置对齐方式

TipText.alignment TextAlignmentOptions.Left;

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

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

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

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

AR游戏开发指南,AR游戏软件定制

增强现实(AR)游戏是一种将虚拟内容叠加到现实世界中的互动游戏类型。通过摄像头和传感器,AR游戏可以让玩家在现实环境中与虚拟物体互动,提供一种沉浸式的游戏体验。玩家可以在真实的世界中看到并与虚拟角色、物体或信息进行交互&a…