如何解决CSS React onclick显示组件
我正在学习CSS和做出反应,并且当用户单击按钮myButton时如何混淆组件的display:block有点困惑。并在用户再次单击该组件时将其隐藏。
我正在使用移动设备和桌面视图,并且希望该按钮不显示在桌面视图中,而只会显示在移动视图中。
在“移动”视图中,一旦用户单击按钮,切换组件就需要显示。那是我不知道如何才能使Toggle css display:block显示整个组件的onclick方法。在桌面视图中切换显示。
这是代码map.tsx
<div className={styles.controlsContainer}>
<Toggle />
</div>
<div className={styles.button_about}>
<AboutPopup />
<Button id=myButton
type="primary"
icon={<FilterOutlined />}
className={styles.filterbutton} onClick== --- How to say to enable toggle css to block??
></Button>
</div>
这是我的map.module.scss的样子
.toggle {
width: 244px;
background: #ffffff;
border: 1px solid #d9d9d9;
box-sizing: border-box;
border-radius: 4px;
display: flex;
align-items: center;
float: left;
}
@media screen and (max-width: $mobileMax) {
.toggle {
display: none;
}
}
.button {
&_about {
@include for-desktop {
position: absolute;
bottom: 2em;
right: 2em;
}
@include for-mobile {
position: absolute;
top: 2em;
z-index: 1;
right: 2em;
z-index: 1;
}
}
}
.filterbutton {
width: 40px;
height: 40px;
left: calc(50% - 40px / 2);
top: calc(50% - 40px / 2);
background: $color-blue;
border-radius: 100px;
color: #83888c;
@include for-desktop {
display: none;
}
@include for-mobile {
position: absolute;
top: 4em;
right: 2em;
}
}
-----更新2 所以我做了这样的事情
const [isShow,setIsShow] = React.useState(true);
const handleClick = () => {
setIsShow((prev) => !prev);
console.log(isShow);
};
return
(
<div className={styles.controlsContainer}>
<Toggle
className= {isShow ? {styles.toggle_show} : {styles.toggle_hide}}
/>
)
但是我在styles.toggle_show上遇到了解析错误,解析错误:“,”期望。eslt
解决方法
也许这可以帮助
import React from "react";
import "./styles.css";
export default function App() {
const [isShow,setIsShow] = React.useState(false);
const handleClick = () => setIsShow((prev) => !prev);
return (
<>
<div className={isShow ? "show" : "hide"}>my toggling component</div>
<button onClick={handleClick}>toggle show</button>
</>
);
}
css:
.show {
display: block;
}
.hide {
display: none;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。