Question

我正在尝试使用React创建一个Portfolio页面。我希望能够在单击按钮时显示可重用的模式，以显示我创建的应用程序中使用的技能。

到目前为止，我已经创建了几个虚拟div，其中包含通用信息。但是，当我单击按钮时，什么也没有发生。在我的模态文件中，我有一个绑定了state和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>

当我单击按钮时，控制台中没有出现错误消息

如何在MERN应用中显示和隐藏div？

0 个答案: