26-二次确认显示框

显示对话框，还不是模态对话框（Modal Dialogue Box）

由 <Logitem> 子组件 创建

jsx 内可以使用 表达式 是否显示确认窗口

// 添加一个state，记录是否显示确认窗口
const [showConfirm, setShowConfirm] = useState(false);


//jsx 内可以使用 表达式 是否显示确认窗口
{showConfirm && <ConfirmModal
    confirmText="该操作不可恢复！请确认"
    onCancel={cancelHandler}
    onOk={okHandler}
/>}

Logitem.js

import React, {useState} from 'react';
import MyDate from "./MyDate/MyDate";
import './LogItem.css'
import Card from "../../UI/Card/Card";
import ConfirmModal from "../../UI/ConfirmModal/ConfirmModal";

const LogItem = (props) => {

    // 添加一个state，记录是否显示确认窗口
    const [showConfirm, setShowConfirm] = useState(false);
    // 删除item的响应函数
    const deleteItemHandler = () => {
        // 显示确认窗口，确认函数执行删除操作
        setShowConfirm(true);
    };

    //取消函数
    const cancelHandler = () => {
        setShowConfirm(false);
    };

    // 确认函数
    const okHandler = () => {
        props.onDelLog();
    };

    return (
        <Card className="item">

            {showConfirm && <ConfirmModal
                confirmText="该操作不可恢复！请确认"
                onCancel={cancelHandler}
                onOk={okHandler}
            />}

            <MyDate date={props.date}/>
            {/* 日志内容的容器 */}
            <div className="content">
                <h2 className="desc">{props.desc}</h2>
                <div className="time">{props.time}分钟</div>
            </div>

        {/*    添加一个删除按钮*/}
             <div>
                 <div onClick={deleteItemHandler} className='delete'>×</div>
             </div>
        </Card>
    );
};


export default LogItem;

BackDrop 遮罩，不能点击其他元素

BackDrop.css

.backDrop{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,.3);
}

BackDrop.js

import React from 'react';
import './BackDrop.css';

const BackDrop = (props) => {
    return (
        <div className="backDrop">
            {props.children}
        </div>
    );
};

export default BackDrop;

调用方式也变了，确认框作为子元素 写在 遮罩层 里面

const ConfirmModal = props => {

    return <BackDrop>
        <Card className="confirmModal">
            <div className="confirmText">
                <p>{props.confirmText}</p>
            </div>
            <div className="confirmButton">
                <button onClick={props.onOk} className="okButton">确认</button>
                <button onClick={props.onCancel}>取消</button>
            </div>
        </Card>;
    </BackDrop>

};

存在问题

1. 该组件 是 card item 的 子元素，一旦父元素开启 position: relative ，定位点改变会不能遮罩全部页面
2. card item 添加 z-index: 1 也会出现问题：都开启了定位，且 z-index 相同都为 1，但是由于橙色在后边，所以实际层级是高于绿色的。由于绿色是遮罩层的父元素，所以即使遮罩的层级是 9999 也依然盖不住橙色。

问题出在了哪？遮罩层的作用，是用来盖住其他元素的，它本就不该作为 Box 的子元素出现，作为子元素了，就难免会出现类似问题。所以我们需要在 Box 中使用遮罩，但是又不能使他成为 Box 的子元素。怎么办呢？React 为我们提供了一个“传送门”可以将元素传送到指定的位置上。 解决办法： 27-Portal 传送门