文章详情页
javascript - REACT组件的样式问题
浏览:38日期:2023-03-16 14:37:57
问题描述
如图所示的三按钮组件,只用原生JS和REACT怎么才能比较简洁的写出点击一个其中一个按钮,让其中一个按钮的样式发生变化。并且点击其他按钮的时候,可以有同样的效果(即清除另外两个的样式,添加点击按钮的样式)
问题解答
回答1:按钮的点击用state维护,是否被点击。不同的状态给不同的样式~~第二个问题,肯定只能写一个p的样式,不可能3个按钮写3个,10个写10个。。。。怼基础数据做一个遍历,render很多个p,p给一个默认的样式,给每个p分配一个不同的key,用来区分
这是一个modal组件,点击不同的button弹出对应的内容~~~
回答2:每个钮设置一个selected字段,选中一个清空其他两个。根据selected的值动态给按钮添加样式。
回答3:可以利用input的radio实现
标签:
JavaScript
相关文章:
1. javascript - vue报错,昨天也是这么写的也没报错呀,今天就报错了,不知原因。求解决2. html - jQuery 移动端横向滚动会带动网页上下滑动怎么办?3. 最新版的phpstudy的mysql版本只是5.5,有没有5.6或者5.7版本的集成版呀?4. css - 这个线怎么做,效果是竖直的效果,5. javascript - 关于微信公众号开发的一个trouble!6. html - 谁能推荐一个类似apple官网的模板,用来展示产品的?7. javascript - 这两种JS写法有什么区别8. css - font-face引入的新字体无法在火狐浏览器上显示?但是谷歌可以?9. css3 - transition transform初始display:block怎么就没移动效果?10. javascript - vue el 重复挂载 同一个实例
排行榜