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

news2024/11/20 6:17:41

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

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

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

相关文章

【Python】 如何在Python中创建GUID UUID

基本原理 GUID(全局唯一标识符)和UUID(通用唯一标识符)都是用来在分布式系统中唯一标识信息的。在Python中,我们可以使用内置的uuid模块来生成这些唯一标识符。 UUID有几种不同的版本,每种版本都有其特定…

图形学初识--光栅化直线算法

文章目录 什么叫做光栅化?为什么需要光栅化?直线的光栅化算法有哪些?Bresemham算法问题定义:问题模型简化:算法核心理解:算法拓展: 结尾:喜欢的小伙伴可以点点关注赞哦 什么叫做光栅…

【Java】手把手学会数组的使用

数组的基本用法 创建数组 基本语法: // 动态初始化 数据类型 [] 数组名称 new 数据类型 [] { 初始化数据 }; // 静态初始化 数据类型 [] 数组名称 { 初始化数据 }; 代码示例: int[] array1 {1,2,3,4,5};int[] array2 new int[]…

如何在OpenHarmony上使用SeetaFace2人脸识别库?

简介 相信大部分同学们都已了解或接触过OpenAtom OpenHarmony(以下简称“OpenHarmony”)了,但你一定没在OpenHarmony上实现过人脸识别功能,跟着本文带你快速在OpenHarmony标准设备上基于SeetaFace2和OpenCV实现人脸识别。 项目效…

c++ 实现 梯度下降线性回归模型

理论与python实现部分 3.1. 线性回归 — 动手学深度学习 2.0.0 documentation c代码 没能力实现反向传播求梯度&#xff0c;只能自己手动算导数了 #include <bits/stdc.h> #include <time.h> using namespace std;//y_hat X * W b // linreg 函数&#xff1a…

9 个适用于小型企业的顶级API管理解决方案

应用程序接口管理解决方案可帮助各种规模的企业开发、部署和管理其应用程序接口&#xff0c;并实现收入最大化。 建立 API 的组织和开发人员可能会被整个 API 生命周期中需要完成的大量任务压得喘不过气来。从规划和构建到部署、维护和货币化&#xff1b;这是一项具有挑战性的工…

【计算机网络原理】对传输层TCP协议的重点知识的总结

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…

7.从0做一个vue键盘组件

文章目录 1. 从0做一个键盘组件1.1. 最终效果1.2. 分析1.3. 实现1.4. 如何引用 1. 从0做一个键盘组件 首先是why的问题&#xff1a;为什么需要做键盘组件&#xff1f; 我们目前可知的场景&#xff1a; 在新增账单的时候&#xff0c;需要用到键盘在比如从账单列表页&#xff…

2024年 电工杯 (B题)大学生数学建模挑战赛 | 大学生平衡膳食食谱的优化设计 | 数学建模完整代码解析

DeepVisionary 每日深度学习前沿科技推送&顶会论文&数学建模与科技信息前沿资讯分享&#xff0c;与你一起了解前沿科技知识&#xff01; 本次DeepVisionary带来的是电工杯的详细解读&#xff1a; 完整内容可以在文章末尾全文免费领取&阅读&#xff01; 问题1&…

【Python自动化测试】:Unittest单元测试与HTMLTestRunner自动生成测试用例的好帮手

读者大大们好呀&#xff01;&#xff01;!☀️☀️☀️ &#x1f525; 欢迎来到我的博客 &#x1f440;期待大大的关注哦❗️❗️❗️ &#x1f680;欢迎收看我的主页文章➡️寻至善的主页 文章目录 &#x1f525;前言&#x1f680;unittest编写测试用例&#x1f680;unittest测…

49 序列化和反序列化

本章重点 理解应用层的作用&#xff0c;初识http协议 理解传输层的作用&#xff0c;深入理解tcp的各项特性和机制 对整个tcp/ip协议有系统的理解 对tcp/ip协议体系下的其他重要协议和技术有一定的了解 学会使用一些网络问题的工具和方法 目录 1.应用层 2.协议概念 3. 网络计…

awesome-ai4s 现已开源!超全 AI for Science 学术论文与数据资源汇总,持续更新ing

2018 年中国科学院院士鄂维南提出「AI for Science」概念&#xff0c;强调利用 AI 学习科学原理、创造科学模型来解决实际问题。同年&#xff0c;AlphaFold 崭露头角&#xff0c;从 43 种蛋白质中准确预测出了 25 种蛋白质结构。2021 年&#xff0c;AlphaFold 2 开源并预测了 9…

缓存降级

当Redis缓存出现问题或者无法正常工作时,需要有一种应对措施,避免直接访问数据库而导致整个系统瘫痪。缓存降级就是这样一种机制。 主要的缓存降级策略包括: 本地缓存降级 当Redis缓存不可用时,可以先尝试使用本地进程内缓存,如Guava Cache或Caffeine等。这样可以减少对Redis…

OpenLayers中实现对ImageStatic图层的扩展以支持平铺WrapX功能

地图平铺技术概述 地图平铺&#xff08;Tiling&#xff09;是一种将大尺寸地图数据分割成小块&#xff08;瓦片&#xff09;的技术&#xff0c;这在地图服务中非常常见。它使得地图数据能高效加载和展示&#xff0c;尤其适合网络环境。通过仅加载当前视图窗口所需的地图瓦片&a…

Qt官方示例---opengl

文件相对路径&#xff1a;Examples\Qt-5.9.1\opengl 2dpainting cube computegles31 contextinfo hellogl2 hellowindow paintedwindow qopenglwidget qopenglwindow textures threadedqopenglwidget

Rabbitmq 搭建使用案例 [附源码]

Rabbitmq 搭建使用案例 文章目录 RabbitMQ搭建docker 代码golang生产者消费者 可视化消费进度 RabbitMQ搭建 docker docker run -d --hostname rabbitmq --name rabbitmq -e RABBITMQ_DEFAULT_USERadmin -e RABBITMQ_DEFAULT_PASSadmin -e RABBITMQ_DEFAULT_VHOSTmy_vhost -e…

重组蛋白表达系统优缺点对比|卡梅德生物

重组蛋白是现代生物技术中不可或缺的一部分&#xff0c;它们广泛应用于药物开发、研究工具和工业酶的生产。根据目标蛋白的特性和所需的修饰&#xff0c;可以选择不同的表达系统。下文罗列一下四个主要蛋白表达系统的优缺点&#xff1a; 1. 原核表达系统&#xff08;如大肠杆菌…

【QT实战】汇总导航

✨Welcome 大家好&#xff0c;欢迎来到瑾芳玉洁的博客&#xff01; &#x1f611;励志开源分享诗和代码&#xff0c;三餐却无汤&#xff0c;顿顿都被噎。 &#x1f62d;有幸结识那个值得被认真、被珍惜、被捧在手掌心的女孩&#xff0c;不出意外被敷衍、被唾弃、被埋在了垃圾堆…

深度学习之基于Tensorflow卷积神经网络(CNN)实现猫狗识别

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 在人工智能和深度学习的热潮中&#xff0c;图像识别是一个备受关注的领域。猫狗识别作为图像识…

Milvus的内存索引

简介&#xff1a; 这篇文章主要介绍milvus支持的各种内存索引&#xff0c;以及它们最适用的场景&#xff0c;还有用户为了获得更好的搜索性能可以配置的参数。 索引是有效组织数据的过程&#xff0c;它的主要角色是在大的数据集中显著的加速耗时的查询从而有效的进行相似搜索…