我想让一个React组件通过点击来隐藏,但我在网上看到的都是关于按钮上的事件处理程序之类的解释。
我使用的是Next.js(但我觉得这些对这个意义不大)。
这是我的组件。
import styles from './styles/popup.module.scss';
import React, { Component } from "react";
export default function Popup() {
return (
<div className={styles.popup}>
<div className={styles.popupInner}>
<h1>Temporary Closure</h1>
<p>
Following the Australian government’s directive to keep our nation safe and limit the spread of Coronavirus (Covid-19), it is with great sadness that we advise that SS will be temporarily closed, effective 23<sup>rd</sup> March 2020
</p>
</div>
</div>
)
}
试试在点击你的组件时设置一个状态。下面的代码应该可以用。
import styles from './styles/popup.module.scss';
import React, { Component } from "react";
export default function Popup() {
const [visible, setVisible] = React.useState(true);
if(!visible) return null;
return (
<div className={styles.popup} onClick={() => setVisible(false)}>
<div className={styles.popupInner}>
<h1>Temporary Closure</h1>
<p>
Following the Australian government’s directive to keep our nation safe and limit the spread of Coronavirus (Covid-19), it is with great sadness that we advise that sydney sauna will be temporarily closed, effective 23<sup>rd</sup> March 2020
</p>
<div className={styles.buttonContainer}><button className={styles.button}>Okay</button></div>
</div>
</div>
)
}
希望能帮到你。
你可以使用一个状态属性来告诉你是否应该隐藏组件。基于这个状态,使用类名包(你需要预先安装它),有条件地渲染另一个CSS类到你想要隐藏的组件上。npm install --save classnames
)
import React, {useState} from 'react';
import classes from './Component.module.css';
import classNames from 'classnames';
const Component = props => {
const [show, setShow] = useState(true);
return (
<div className={classes.Component} onClick={() => setShow(!show)}>
<div
className={classNames( {
[classes.Show]: true,
[classes.Disappear]: !show
})}
>
{props.children}
</div>
</div>
);
};
export default Component;
在Disappear css类中,你可以使用任何你需要的css属性来使你的组件以更优雅的方式消失,例如 display: none;
或 visibility: hidden;
(包括过渡)
当然,如果你要找的是完全不渲染组件,那么其他答案中的标准 "将div包装在if语句中 "是一个完全有效的解决方案。
你需要创建一个状态变量,它将决定是否显示popup.你可以通过使用状态钩子来实现。
import styles from './styles/popup.module.scss';
import React, { Component , useState } from "react";
export default function Popup() {
const [isPopupVisible,setPopupVisibility] = useState(true);
return (
<div className={styles.popup}>
{ isPopupVisible && (<div className={styles.popupInner}>
<h1>Temporary Closure</h1>
<p>
Following the Australian government’s directive to keep our nation safe and limit the spread of Coronavirus (Covid-19), it is with great sadness that we advise that SS will be temporarily closed, effective 23<sup>rd</sup> March 2020
</p>
<div className={styles.buttonContainer}><button className={styles.button} onClick={setPopupVisibility(false)}>Okay</button></div>
</div>)}
</div>
)
}