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

javascript - REACT组件的样式问题

浏览：172日期：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. css3 - 一个关于CSS雪碧图的问题2. Docker for Mac 创建的dnsmasq容器连不上/不工作的问题3. docker-machine添加一个已有的docker主机问题4. redis编译报错：cannot find -lgcc_s5. docker镜像push报错6. 如何解决Centos下Docker服务启动无响应，且输入docker命令无响应？7. mac里的docker如何命令行开启呢？8. angular.js - 如何在指令里使用ng-click9. node.js - antdesign怎么集合react-redux对input控件进行初始化赋值10. wordpress - nginx 反代 Varnish 走 Https ，WP后台 ‘您没有足够的权限访问该页面。’
排行榜
Docker for Mac 创建的dnsmasq容器连不上/不工作的问题
Docker for Mac 创建的dnsmasq容器连不上/不工作的问题
1. docker-machine添加一个已有的docker主机问题
2. docker镜像push报错
3. css3 - 一个关于CSS雪碧图的问题
4. redis编译报错：cannot find -lgcc_s
5. 如何解决Centos下Docker服务启动无响应，且输入docker命令无响应？
6. mac里的docker如何命令行开启呢？
7. angular.js - 如何在指令里使用ng-click
8. node.js - antdesign怎么集合react-redux对input控件进行初始化赋值
9. 在bootstrap中怎么让浏览器缩小到一定大小时，里面的元素就不自适应屏幕大小，而是固定的大小。
10. wordpress - nginx 反代 Varnish 走 Https ，WP后台 ‘您没有足够的权限访问该页面。’
热门标签