Как показать и скрыть div в приложении MERN? - PullRequest
Новая
       12

Как показать и скрыть div в приложении MERN?

0 голосов
/ 26 июня 2019

Я пытаюсь создать страницу портфолио с помощью React.Я хочу иметь возможность отображать повторно используемый модал при нажатии кнопки, который отображает навыки, используемые в приложениях, которые я создал.

До сих пор я создал пару фиктивных элементов с общей информацией в них.Однако, когда я нажимаю на кнопку, ничего не происходит вообще.В моем модальном файле у меня есть конструктор с привязкой к состоянию и функции modalHandler.

Мой файл Modal.js: 

    import React, { Component } from 'react';
    import "./modal.css";

    class Modal extends Component {
         constructor(props)  {
            super(props);
            this.state = {
                modalToggle: true
            };
            this.modalHandler = this.modalHandler.bind(this)
        }

        modalHandler = (e) => {
            e.preventDefault(); //i added this to prevent the default 
    behavior
            const modalToggle = this.state;
            this.setState({
              modalToggle: !modalToggle
            })
          }      

        render()    {
            return(
                <div class="modalContent">
                    {this.props.children}
                </div> 
            );
        }
    }

    export default Modal;

Мой файл modal.css: 

    .modalContent   {
        background: black;
        color: #ffef96;
        border: #ffef96 1px solid;
    }

Мой файл Portfolio.js: 

    import React, { Component } from "react";
    import "./portfolio.css";
    import dadirri from "../../images/rsz_1dadirri.png";
    import Modal from "../../components/Modal/Modal";

    class Portfolio extends Component   {
        render() {

        return (
            <div className="container">
                <div class="row pagecolor">
                    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl- 
    12">
                    <h4 class="page-header" style={{marginTop: "10px", 
    paddingLeft: "70px", paddingRight: "60px"}}>Portfolio<hr/></h4>
                        <div class="row" id="apps">
                            <div classname="col-4 col-sm-4 col-md-4 col-lg-2 
    col-xl-2">
                                <div class="card bg-dark mb-3" style={{width: 
    "19rem", boxShadow: "10px 10px 2px black", transform: 
    "translateY(4px)"}}>
                                <img src={dadirri} class="card-img-top-fluid" 
    alt="dadirri" style={{paddingBottom: "25px"}}></img>
                                    <div class="card-body">
                                        <button onClick={this.modalHandler} 
    style={{color: "#ffef96", background: "black", fontSize: "24px", width: 
    "60%", height: "50px", border: "#ffef96 solid 1px", fontFamily: 
    "'Cinzel', serif"}}>Dadirri</button>
                                        {this.setState.modalToggle && <Modal>
                                            <div style={{color:'#ffef96'}}>
                                            The Best Has Happened To ME
                                            </div>
                                        </Modal>} 
                                    </div>
                                    <div class="card-body" style= 
    {{textDecoration: "underline"}}>
                                        <a 
    href="https://dadirri.herokuapp.com/" className="card- 
    link">Deployment</a><hr/>
                                        <a 
    href="https://github.com/jlevine84/Dadirri" className="card-link">Github 
    Repo</a>
                                    </div>
                                 </div>
                            </div>

Нет сообщений об ошибках в консоли при нажатии на кнопку

...