Question

我的应用程序内部有两个模态。一个是Survey模态，另一个是TimeOutModal组件，它提示注销“ Yes or No”按钮，询问用户是否需要更多时间登录。

通过页面加载时嵌入的javascript代码段调用该Survey，以呈现一个类，而TimeOutModal是其自身的组件，该组件在不活动5分钟后呈现。

两者都是占据整个页面的弹出窗口。

我的问题是，当出现TimeOutModal时，如果它在屏幕上仍然可见，我需要能够完全隐藏该测量。如果用户选择“是”以保持滞后状态，则TimeOutModal应该消失并取消隐藏“调查”模式。

我不确定如何在我的TimeOutModal组件中指定一个类，该类将通过隐藏/显示状态影响测量。

感谢您的帮助。

这是我的TimeOutModal代码：

export default class TimeoutModal extends Component {
    constructor(props) {
        super(props);
        if (!isUndefined(props.timeoutObject)) {
            props.timeoutObject.endTimeoutTimer();
        }

        var timeRemaining = props.duration * 1000 || 5 * 60 * 1000;
        // Create a global reference to the end time, rather than a countdown.
        this.endTime = new Date().getTime() + timeRemaining;

        // Update the timer ever second
        setInterval(this.updateTimer, 1000);
        this.timeoutObject = setTimeout(this.logout, timeRemaining);

        this.state = {
            timeRemaining: timeRemaining - 1000,
        };
    }

    componentWillMount = () => {
        window.scrollTo(0, 0);
    };

    logout = () => {
        return (window.location = this.props.endUrl);
    };

    updateTimer = () => {
        this.setState(() => {
            var now = new Date().getTime();
            var timeRemaining = this.endTime - now;
            if (timeRemaining <= 0) {
                this.logout();
            }
            return {
                timeRemaining: timeRemaining,
            };
        });
    };

    continueSelected = () => {
        clearTimeout(this.timeoutObject);
        this.props.continueFunction();
    };

    formatTime = () => {
        const distance = this.state.timeRemaining;
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
        if (minutes <= 0 && seconds <= 0) {
            return '0:00';
        }
        seconds = seconds < 10 ? `0${seconds}` : seconds;
        return `${minutes}:${seconds}`;
    };

加载组件时使用CSS隐藏/显示类

0 个答案: