Question

我是ReactJS的新手，并且在我的代码中发现了一个奇怪的错误。这是针对www.drewpickering.com。请访问该网站。

我在屏幕底部有一些菜单项。右上方的汉堡菜单按钮将触发菜单项的幻灯片。如果再次单击该按钮，则应关闭菜单。

这很好，直到我单击菜单项。菜单项会弹出一个叠加层，可以在屏幕右上方使用“ x”关闭该叠加层。关闭菜单覆盖后，就会出现此问题。关闭后，再次单击汉堡菜单，您会看到覆盖图出现，而不仅仅是关闭屏幕底部的菜单栏。

我不确定这是css问题还是我处理状态更改的方式。

以下是从“正方形”菜单部分开始的代码：

import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import './squares-section.scss';
import Overlay from "../overlay/Overlay";
import Slider from "react-slick";
import $ from "jquery";

class SquaresSection extends Component {

    state = {
        showModal: false,
        modalType: "",
    }

    handleOverlay = (type) => {
        $(window).scrollTop(0);
        this.setState({
            showModal: true,
            modalType: type,
        })
    }

    render() {
        return (
            <div>
                <section id="squares-section">
                    <div className="square" onClick={this.handleOverlay.bind(this, "education")}><FontAwesomeIcon icon="user-graduate" size="2x" /></div>
                    <div className="square" onClick={this.handleOverlay.bind(this, "skills")}><FontAwesomeIcon icon="desktop" size="2x" /></div>
                    <div className="square" onClick={this.handleOverlay.bind(this, "experience")}><FontAwesomeIcon icon="building" size="2x" /></div>
                    <div className="square" onClick={this.handleOverlay.bind(this, "contact_me")}><FontAwesomeIcon icon="address-book" size="2x" /></div>
                    <div className="square" onClick={this.handleOverlay.bind(this, "volleyball")}><FontAwesomeIcon icon="volleyball-ball" size="2x" /></div>        
                </section>
                <Overlay show={this.state.showModal} type={this.state.modalType} hideTitle={this.modalType == 'volleyball' ? true : false} />
            </div>
        )
    }
}

export default SquaresSection;

这是“汉堡包图标菜单”按钮的代码：

import React, { Component } from 'react';
import './hamburgers.scss';

class Hamburgers extends Component {

    handleClick() {
        this.props.runFunction();
    }

    render() {
        return (
            <button id="hamburgers" type="button" className="navbar-toggle collapsed" onClick={this.handleClick.bind(this)}>
                <span className="sr-only">Toggle navigation</span>
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
            </button>
        )
    }
}

export default Hamburgers;

如果需要，我可以提供CSS。谢谢，感谢您的帮助。

更新：这是this.props.runFunction（）的代码：

import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom';
import IntroSection from '../introsection/IntroSection';
import scrollToElement from 'scroll-to-element';
import SquaresSection from "../squaressection/SquaresSection";
import './app-container.scss';
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUserGraduate, faDesktop, faAward, faVolleyballBall, faAddressBook, faWindowClose, faBuilding } from '@fortawesome/free-solid-svg-icons'
import WebSiteBanner from "../websitebanner/WebSiteBanner";
import Hamburgers from '../hamburgers/Hamburgers';

library.add(
    faUserGraduate, 
    faDesktop, 
    faAward, 
    faVolleyballBall, 
    faAddressBook, 
    faWindowClose, 
    faBuilding
);

if (process.env.NODE_ENV !== 'production') {
    console.log('*** Looks like we are in development mode! ***');
}

class AppContainer extends Component {

    state = {
        showMenu: false,
        showBanner: true,
    }

    toggleMenu() {
        this.setState({showMenu: !this.state.showMenu});
    }

    render() {
        return (
            <div>
                <div id="main-content">
                    <Hamburgers runFunction={this.toggleMenu.bind(this)} />
                    <IntroSection showMenu={this.state.showMenu} />
                    <SquaresSection />
                </div>
                <WebSiteBanner />
            </div>
        )
    }
}

export default AppContainer;

汉堡包部分：

import React, { Component } from 'react';
import './hamburgers.scss';

class Hamburgers extends Component {

    handleClick() {
        this.props.runFunction();
    }

    render() {
        return (
            <button id="hamburgers" type="button" className="navbar-toggle collapsed" onClick={this.handleClick.bind(this)}>
                <span className="sr-only">Toggle navigation</span>
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
            </button>
        )
    }
}

export default Hamburgers;

然后是Overlay.js组件：

import React, { Component } from 'react';
import './overlay.scss';
import $ from 'jquery';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import SkillsSection from "../skillssection/SkillsSection";
import EducationSection from "../educationsection/EducationSection";
import ContactMeSection from "../contactmesection/ContactMeSection";
import ExperienceSection from "../experiencesection/ExperienceSection";
import VolleyballSection from "../volleyballsection/VolleyballSection";

class Overlay extends Component {

    state = {
        show: false,
        type: "default",
    }

    componentWillReceiveProps(nextProps) {
        this.setState({ 
            show: nextProps.show, 
            type: nextProps.type,
            hideTitle: nextProps.type,
        });  
    }

    renderTypeComponent(type) {
        switch(type.toLowerCase()) {
            case "education":
                return <EducationSection />
            case "skills":
                return <SkillsSection />
            case "experience":
                return <ExperienceSection />
            case "contact_me":
                return <ContactMeSection />
            case "volleyball":
                return <VolleyballSection />                
            default:
                return <div>Default</div>
        }
    } 

    renderHeader(type) {
        let types = type.split("_");

        types.map((type, i) => {
            types[i] = type.charAt(0).toUpperCase() + type.substr(1);
        })      

        return types.join(" ");
    }

    closeOverlay() {
        // window.scrollTo(0, document.body.scrollHeight);
        this.setState({ show: false, type: '' });  
    }

    render() {
        return (
            <section id="overlay" style={{display: (this.state.show ? "block" : "none")}}>
                <div className="content">
                    <div className="overlay-close-box" onClick={this.closeOverlay.bind(this)}><FontAwesomeIcon icon="window-close" size="2x" /></div>
                    {this.renderTypeComponent(this.state.type)}
                </div>
                <div className="secret-overlay-close-box" onClick={this.closeOverlay.bind(this)}><FontAwesomeIcon icon="window-close" size="2x" /></div>
            </section>
        )
    }
}

export default Overlay;

Answer 1

我的猜测是，当您单击“ X”时，您仅翻转this.state.showModal，视图将记住this.state.modalType。当您点击“ X”时，请确保将this.state.modalType设置回“”

怪异状态更改了覆盖更新

1 个答案: