怎么用react實現消息顯示器

這篇文章主要介紹“怎么用react實現消息顯示器”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“怎么用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;

關于“怎么用react實現消息顯示器”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。