时间戳

首页 > 解决方案 > ReactJS，在另一个模态之上显示模态

javascript - ReactJS，在另一个模态之上显示模态

问题描述

我试图在另一个模态组件的顶部显示一个模态组件。当单击 ChannelDetail 类（第一个模态）内的按钮时，应该在顶部打开另一个模态（模态类）。但是，它在第​​一个模态后面打开，并且第一个模态的状态没有正确传递给第二个模态。如何使用正确的道具正确打开第二个模态？

import React, { Component } from 'react'
import './style.css'
import { ExcelRenderer} from 'react-excel-renderer';
import Modal from './Modal'

export class ChannelDetail extends Component {

    state = { rows: [], cols: [], outage: '', d: 'ande' };

    showOutageFiles = (e) => {
      e.preventDefault(); 
      this.setState({ outage: e.target.value })
      document.querySelector('.bg-modal-outage').style.display = 'block';
    }

    fileHandler = (event) => {
        let fileObj = event.target.files[0];
        //just pass the fileObj as parameter
        ExcelRenderer(fileObj, (err, resp) => {
          if(err){
            console.log(err);            
          } else{
            this.setState({
              cols: resp.cols,
              rows: resp.rows
            });
          }
        });               
    }

    render() {
      const { channelSelectedData } = this.props
       if (this.props.channelSelectedData.length >= 1 && this.props.datatype != 'slar'){         
            return(
              <div>
                <div> <Modal data={this.state.outage} type={this.state.d}/> </div>
                <div className="channel-detail-box">
                      <p>Channel Selected: {this.props.channelSelectedData[0].channel}</p>
                      <p>Inspected: {this.props.channelSelectedData.length} time(s)</p>
                      <p>Last Inspection Date: {this.props.channelSelectedData[0].scanned}</p>
                      <p>Outages: {channelSelectedData.map(({ outage }) => <button value={outage} onClick={this.showOutageFiles}>{outage + ', '}</button>)}</p>
                </div>      
              </div>
            )
        } else {
            return (
                <div>
                    <p>No data found</p>
                </div>
            )
        }
    }
}

export default ChannelDetail



import React, { Component } from 'react'
import './style.css'

export class Modal extends React.Component {

    // closes modal for outage files 
    hideOutageFile = () => {
        document.querySelector('.bg-modal-outage').style.display = 'none';
    }

    render () {

         // ANDE reports linked on the outage modal popup
         const reportsANDE = {
            'P1-1987': 'http://192.168.191.128:8080/P-IR-1-03650-1_R000(P1-1987).pdf',
            'P1-1992': 'http://192.168.191.128:8080/PA-IR-92-1-03640-31_R001(P1-1992).pdf',
            'P0211': 'http://192.168.191.128:8080/NA44-IR-03641-00001_R001(P0211).pdf',
            'P1011': 'http://192.168.191.128:8080/NA44-IR-31100-00002.pdf',
        }

        // ANDE excel files linked on the outage modal popup
        const excelANDE = {
            'P1-1987': 'http://192.168.191.128:8080/Historical_Directory_PNGS_1-2018.xlsx',
            'P1-1992': 'http://192.168.191.128:8080/Historical_Directory_PNGS_1-2018.xlsx',
            'P0211': 'http://192.168.191.128:8080/Historical_Directory_PNGS_1-2018.xlsx',
            'P1011': 'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls',
        }

        const prop = 'text-align';
        const textStyle = { [prop]: 'center' };
        console.log(this.props.data)

        // Modal popup for downloading ANDE outage files
        if (this.props.type === 'ande'){
            return (
                <div className="bg-modal-outage">
                    <div className="modal-outage-content">
                        <span className="close-Btn" onClick={this.hideOutageFile}>&times;</span>
                        <h2 style={textStyle}>{this.props.data}</h2>
                        <p> 
                            <a href={excelANDE[this.props.data]}>Download Spreadsheet <i class="fas fa-file-excel"></i></a> <br/> 
                            <a href={reportsANDE[this.props.data]}> Download Report <i class="fas fa-file-pdf"></i></a>
                        </p> 
                    </div>
                </div> 
            )
        }
    }
}

export default Modal

标签： javascriptreactjsmodal-dialogstate

解决方案

您的 .bg-modal-outage 组件可以接收通过的属性

<Modal data={this.state.outage} type={this.state.d}/> </div>.

就像是：

<Modal data={this.state.outage} type={this.state.d} isActive={yourClickEvent}/> </div>

在 Modal 组件中使用类似的东西

<div className="bg-modal-outage" style={{ display: isActive ? "block" : "none" }}>

推荐阅读