React:如何通过点击来隐藏一个组件?

问题描述 投票:1回答:3

我想让一个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>
    )
}
javascript reactjs event-handling components
3个回答
3
投票

试试在点击你的组件时设置一个状态。下面的代码应该可以用。

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>
    )
}

希望能帮到你。


2
投票

你可以使用一个状态属性来告诉你是否应该隐藏组件。基于这个状态,使用类名包(你需要预先安装它),有条件地渲染另一个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语句中 "是一个完全有效的解决方案。


0
投票

你需要创建一个状态变量,它将决定是否显示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>
    )
}
© www.soinside.com 2019 - 2024. All rights reserved.