React Card 卡片和遮罩层的设置

import * as React from 'react'
import { Card, Checkbox } from 'antd';
import * as styles from './SubscribeCard.module.less'
class SubscribeCard extends React.Component {
    state={
        maskHidden:true
    }
    maskOnMouseEnter=(e:any)=>{
        const {maskHidden} = this.state
        this.setState({
            maskHidden:!maskHidden
        })
    }
    maskOnMouseLeave=(e:any)=>{
        this.setState({
            maskHidden:true
        })
    }
    render() {
        const svgOne = require("@assets/images/icon/aa.png")
        return (
            <div className={styles.cardClass}>
                <Card
                    cover={
                        <div>
                            <div onMouseEnter={this.maskOnMouseEnter} onMouseLeave={this.maskOnMouseLeave}>
                                <div className={styles.header}>
                                    <span className={styles.SpanLeft}>行业通用</span>
                                    <span className={styles.SpanRight}>350条</span>
                                </div>
                                <div><img src={svgOne} alt="111" /></div>
                            </div>
                            <div
                            hidden={this.state.maskHidden}
                            className={styles.mark}
                                style={{
                                    display: 'flex',	// 使用flex布局
                                    position: 'absolute',	// 绝对定位
                                    top: '0px',	// 距离父级元素顶部0像素
                                    left: '0px',	// 距离父级元素左侧0像素
                                    zIndex: 10,	// 遮罩层的堆叠层级（只要设置的比被遮罩元素高就行）
                                    height: '75%',	// 与父级元素同高
                                    width: '100%',	// 与父级元素同宽
                                    background: '#646464',	// 半透明背景
                                    textAlign: 'center',
                                    justifyContent: 'space-around',
                                    alignItems: 'center',
                                    opacity:'0.6',
                                    pointerEvents:'none'
                                }}>

                            </div>
                        </div>
                    }
                    actions={[
                        <div><Checkbox>订阅</Checkbox></div>
                    ]}
                >
                </Card>
            </div>
        )
    }
}
export default SubscribeCard

注意点：DIV上添加的onMouseEnter={this.maskOnMouseEnter} onMouseLeave={this.maskOnMouseLeave}会造成遮罩层一直闪动问题，解决办法就是遮罩层样式添加：

pointerEvents:'none'