react實現訊息顯示器

import React from 'react';
import styles from './styles.less';
import badgeImg from '@/assets/leftmenu/badgeImg.png';
import router from 'umi/router';
import { connect } from 'dva';
import { Popover, Badge, Button, Modal } from 'antd';

function mapStateToProps({ InformationModel }) {
    return {
        InformationModel: InformationModel,
    };
}
@connect(mapStateToProps)
class Information extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            unreadList: [],
            infoTitle: '',
            infoContent:'',

        };
    }
    //渲染前呼叫
    componentWillMount() { }

    //渲染後呼叫
    componentDidMount() {
        this.getunreadDatas();
    }
    //呼叫介面獲取未讀資料
    getunreadDatas() {
        let { dispatch } = this.props;
        let userid = localStorage.getItem('userid');
        let params = {
            id: userid,
            pageNum: 0,
            pageSize: 0
        }
        dispatch({ type: 'InformationModel/getunreadData', payload: { params: params, callback: this.unreadCallback.bind(this) } });
    }
    //介面回撥方法
    unreadCallback(e) {
        this.setState({
            unreadList:e
        })
    }
    //檢視詳情
    showInfo(e) {
        let { dispatch } = this.props;
        let userid = localStorage.getItem('userid');
        let params = {
            id:e.id,
            userId:userid,
        }
        //呼叫介面標記已讀
        dispatch({ type: 'InformationModel/getreadData', payload: { params: params, callback: this.readCallback.bind(this) } });
        this.setState({
            infoTitle:e.name,
            infoContent:e.text
        })
    }
    //標記介面回撥函數
    readCallback(e){
        this.setState({
            visible: true,
        });
        //重新整理列表
        this.getunreadDatas();
    }
    //顯示全部
    showAllInfo(){
        router.push({
            pathname: `/cs/InformationMoreList`,
            query: {
            },
        });
    }
    //彈框確認按鈕
    handleOk = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    //彈框取消按鈕
    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    render() {

        const content = (
            <div className={styles.infoTabs}>
                <div className={styles.infoList}>
                    {
                        this.state.unreadList.map((item,index)=>{
                            return <div className={styles.infoRow} onClick={this.showInfo.bind(this,item)}>
                            <div className={styles.infoTitle}>{item.name}</div>
                            <div className={styles.infoContent}>{item.text}</div>
                        </div>
                        })
                    }
                    
                </div>
                <div className={styles.showAll}>
                    <Button onClick={this.showAllInfo.bind(this)} className={styles.showAllBtn}>檢視全部</Button>
                </div>
            </div>
        );

        return (
            <React.Fragment>
                <div className={styles.allBox}>
                    <Popover onMouseEnter={this.getunreadDatas.bind(this)} content={content} title="訊息">
                        <Badge count={this.state.unreadList.length} showZero>
                            <img src={badgeImg}></img>
                        </Badge>
                    </Popover>
                    <Modal
                        title={this.state.infoTitle}
                        visible={this.state.visible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                        footer={null}
                    >
                        <p>{this.state.infoContent}</p>
                    </Modal>
                </div>
            </React.Fragment>
        );
    }
}
export default Information;