企业微信群聊消息react如何做

最新推荐文章于 2024-04-24 10:01:55 发布

码小白的求学之路

最新推荐文章于 2024-04-24 10:01:55 发布

阅读量283

点赞数

分类专栏：笔记文章标签： react 企业微信

本文链接：https://blog.csdn.net/Yanxiaona111/article/details/116460555

版权

本文介绍如何在企业微信环境中，利用React框架来开发和处理群聊消息的功能，包括组件设计、事件监听和消息交互等关键点。

摘要由CSDN通过智能技术生成


import React, {
    PureComponent } from 'react';
import {
    Row, Col, Card, Modal } from 'antd';
import {
    renderConI } from './renderCon.js';

export default class Chatrecord extends PureComponent {
   
  constructor(props) {
   
    super(props);
    this.state = {
   
      modalBox: {
    visible: false, data: {
   } },
    }
  };

  handleModalVisible = (flag = false, item = {
   }) => {
   
    this.setState({
   
      modalBox: {
    visible: flag, data: item },
    })
  }

  handleNextValue = (values) => {
   
    const {
    modalBox } = this.state;
    this.setState({
   
      modalBox: {
    ...modalBox, data: {
    ...values } },
    })
  }

  render() {
   
    const {
    modalBox } = this.state;
    const {
    item } = this.props;
    // console.log(item.chat_content,78);
    return (
      <>
        <Card
          size="small"
          hoverable
          style={
   {
    width: 220, height: 80 }}
          onClick={
   () => this.handleModalVisible(true, item)}
        >
          <Row style={
   {
    fontWeight: 600, fontSize: 16 }}>
            <Col span={
   24}>{
   item.h_title}</Col>
          </Row>
          <Row style={
   {
    color: '#9195a3', fontWeight: 100, fontSize: 12 }}>
            <Col span={
   24}>[聊天记录]</Col>
          </Row>
        </Card>
        <Modal
          title={
   modalBox.data.h_title}
          visible={
   modalBox.visible}
          onCancel={
   () => this.handleModalVisible()}
          destroyOnClose
        >
          {
   
            modalBox.data.chat_content && modalBox.data.chat_content.length ? (
              modalBox.data.chat_content.map(i => {
   
                return (
                  i.chat_content && i.chat_content.length ? (
                    <div
                      key={
   i.id}
                      onClick={
   () => {
   
                        this.handleNextValue(i)
                      }}
                    >
                      {
   /* {i.id} */}
                      <Card
                        size="small"
                        hoverable
                        style={
   {
    width: 220, height: 103 ,marginBottom:10}}
                        extra={
   
                          <div>
                            <span href="#" style={
   {
    float: '