您的位置：首页技术文章
文章详情页

javascript - REACT组件的样式问题

浏览：303日期：2023-03-16 14:37:57

问题描述

javascript - REACT组件的样式问题

如图所示的三按钮组件，只用原生JS和REACT怎么才能比较简洁的写出点击一个其中一个按钮，让其中一个按钮的样式发生变化。并且点击其他按钮的时候，可以有同样的效果（即清除另外两个的样式，添加点击按钮的样式）

问题解答

回答1：

按钮的点击用state维护，是否被点击。不同的状态给不同的样式~~第二个问题，肯定只能写一个p的样式，不可能3个按钮写3个，10个写10个。。。。怼基础数据做一个遍历，render很多个p，p给一个默认的样式，给每个p分配一个不同的key，用来区分javascript - REACT组件的样式问题

这是一个modal组件，点击不同的button弹出对应的内容~~~

javascript - REACT组件的样式问题

回答2：

每个钮设置一个selected字段，选中一个清空其他两个。根据selected的值动态给按钮添加样式。

回答3：

可以利用input的radio实现

标签： JavaScript
上一条：javascript - js的 <> 这种写法是什么意思下一条：javascript - 为什么我用phantomjs抓取页面，如果页面数据多就抓取不到？
相关文章：
1. javascript - 初学angularJS+express，路由路径中/转换成%2F，导致路径失效，求原因？2. html - 急求，能否用flex或者高端点的CSS来布局这个图呢？不想用浮动或定位了3. PHP类中的$this4. boot2docker无法启动5. javascript - 关于jsp中嵌入js代码的问题6. javascript - 百度坐标,返回目标附近有哪些坐标7. html5 - 只用CSS如何实现input框的宽度随框里输入的内容长短自动适应？8. html5 - 在微信上扫二维码看到有趣的h5页面，怎样才可以看到它的代码呢？9. Python操作sqlserver是异步的吗？10. python3.x - python中的虚拟环境怎样设置一直处于激活状态
排行榜
PHP类中的$this
PHP类中的$this
1. html5 - 只用CSS如何实现input框的宽度随框里输入的内容长短自动适应？
2. html - 急求，能否用flex或者高端点的CSS来布局这个图呢？不想用浮动或定位了
3. javascript - 关于jsp中嵌入js代码的问题
4. javascript - 百度坐标,返回目标附近有哪些坐标
5. javascript - 初学angularJS+express，路由路径中/转换成%2F，导致路径失效，求原因？
6. boot2docker无法启动
7. javascript - 粘贴一段带有图片和文字的内容，如何使用js实现获取图片并上传到服务器？
8. javascript - 请教，用原生js插入html的问题
9. thinkphp3.2.3对接新版支付宝
10. Python, for-else, while-else是否造成了语义歧义 ( 增加心智负担 )?
热门标签