使用覆盖更新的奇怪状态更改

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。谢谢，我很感激你的帮助。

更新：这是这个.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设置回">