从0学习React(5)---通过例子体会setState

上篇文章中,我们讲到了通过setState来更新组件的状态。我觉得上篇文章我讲的已经是比较详细的了,而且讲的很通俗易懂。但是上篇文章终归还是理论,没有实践,所以还是学了个表面而已。这篇文章我就结合一点实践来讲讲怎么使用这个setState。

先来看一下这个图:

现在这里有两个按钮:"未完成"和"已完成",还有一个选项项:"故障状态"。

如果你点击未完成或者已完成按钮,虽然会显示对应的故障单,但是没有那种点击效果,就是点击按钮,按钮不会上色。那如果我想让按钮上色,应该怎么办呢?

未完成按钮是一个组件,这个按钮组件会有状态,那如果想上色的话,我们在按钮组件里加一个状态就好了。

第一步是在初始化状态的时候,给这个上色的状态加一个默认值,默认值为空,就是说第一次渲染的时候,按钮先不上色:

之后,找到未完成按钮的事件处理函数,在事件处理函数的setState更新状态中,加一个更新的状态,点击按钮就更新这个状态为cancel1

这样,在点击未完成按钮的时候,就有颜色出现了。同理,已完成按钮也是同样的操作。

这个时候,点击未完成按钮,未完成按钮高亮。点击已完成按钮,已完成按钮高亮。

请问这样可以了吗?不可以!

为什么不可以?我测试了一下发现,当我点击选项项的时候,按钮的高亮并不会消失。而且当我选择其中的一个选项的时候(比如待初诊),拿到的并不是待初诊的故障单,还是未完成或者已完成的故障单。所以我们需要找到选项项的代码,看看它的事件处理函数是什么样的:

看了这个代码,已经完全懂了。因为在点击的时候,这个状态更新没有将更新execStatus的值更新为空,而且没有将高亮更新为空,所以执行的时候execStatus==1,selectedButton==cancel1,这就不难解释为什么你点击待初诊选项的时候,这个未完成按钮高亮不会消失(因为selectedButton==cancel1),而且拿到的并不是待初诊的故障单而是未完成的故障单(因为execStatus==1)。

一句话讲就是这个选项项的setState没有更新这两个状态,你把这两个状态更新为null那就可以了:

试了一下,果然可以了。这就大功告成了。

这篇文章,我通过实践的方式讲了一下更新状态setState。当我解决完这个问题后,我发现我对于setState的理解更加透彻了。

相关推荐
敲敲了个代码8 小时前
多标签页强提醒不重复打扰:从“弹框轰炸”到“共享待处理队列”的实战
java·前端·javascript·面试·架构
江苏世纪龙科技8 小时前
助力职校教学:大众ID.4 CROZZ新能源汽车维护与高压组件更换仿真教学软件
学习
不想上班只想要钱8 小时前
动态类名在 <swiper-slide 的复制项中没有起作用的解决方法
前端·vue.js
weixin_395448918 小时前
tidl_import_mul_rmfsd_psd_u8_3x480x544_bise_raw_dynamic.txt
java·服务器·前端
Jinuss9 小时前
源码分析之React中updateContainerImpl方法更新容器
前端·react.js·前端框架
HyperAI超神经9 小时前
具身智能资源汇总:机器人学习数据集,在线体验世界建模模型,英伟达/字节/小米等最新研究论文
人工智能·深度学习·学习·机器学习·机器人·ai编程·图形生成
Mr Xu_10 小时前
Vue + Element Plus 实现前端导出 Excel 功能详解
前端·javascript·vue.js
仰泳之鹅10 小时前
【杂谈】使用Edge浏览器下载文件显示“Microsoft Defender SmartScreen 已阻止此不安全文件”的解决方法
前端·edge
AI-小柒10 小时前
从零入门大语言模型(LLM):系统学习路线与实践指南
大数据·开发语言·人工智能·学习·信息可视化·语言模型·自然语言处理
万邦科技Lafite10 小时前
小红书评论数据一键获取,item_reviewAPI接口讲解
大数据·前端·数据库·chrome·电商开放平台