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

javascript - REACT组件的样式问题

浏览:38日期: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
相关文章: