【源码】基于React框架的IM输入框组件

项目简介

本项目是基于React框架开发的即时通讯输入框组件，具备Emoji表情插入、@成员功能、多会话输入框缓存、图片与文件插入等特性，能为即时通讯应用提供便捷的输入解决方案。

项目的主要特性和功能

1. Emoji表情插入：可将Emoji表情插入输入框显示。
2. @成员功能：输入@时弹出成员列表，在输入框高亮提示，支持模糊搜索。
3. 多会话输入框缓存：切换会话时，自动缓存和恢复输入框内容。
4. 图片与文件插入：支持将图片和文件拖拽到输入框中显示。

安装使用步骤

安装

假设你已下载项目源码文件，在项目根目录下执行以下命令安装依赖： npm i @shen9401/react-im-input pinyin-match

使用

以下是一个简单的使用示例： ```jsx import ImInput from '@shen9401/react-im-input' import { useState, useRef } from 'react';

function App(){ const [out,setOut] = useState([]) const imInputRef = useRef(null) const memberList = useMemberList()

function sendMsg(list:EMsgItem[]){ setOut(list) }

function handleEmojiClick(item:IEmojiItem){ imInputRef.current?.insertEmoji(item) }

return (

各功能使用说明

1. Emoji功能：调用内部方法 imInputRef.current?.insertEmoji(item)，其中 item 需满足 { key:string, data:base64 } 结构。
2. @成员功能：在props中传入 memberList，其需满足 [{ id:string,name:string, avatar:string}] 结构。
3. 发送消息：在props中传入 sendMsg，按Enter键或调用 imInputRef.current?.sendMsg() 会触发 sendMsg 回调。
4. 直接操作InnerHTML：使用 imInputRef.current?.setInnerHTML 直接覆盖输入框内容，使用 imInputRef.current?.getInnerHTML 获取输入框原生内容。
5. 多会话，输入框内容缓存：
   • 切换 props 上的 inputId 可缓存上一次 id 的输入框内容。
   • 清空指定 inputId 的缓存：clearCache('inputId')。
   • 清空所有缓存：clearCache(undefined)。
6. 输入框显示图片：
   • 拖拽图片：直接拖入图片到输入框内部即可自动展示。
   • 外部插入：构造一个 FilePayload 对象，调用 insertImg 方法。示例如下： js const filePayload = { fileRealName: file.name, fileSize: file.size, type: file.type, localPath: (file as any).path, // electron 扩展属性 file, }; imInputRef.current.insertImg(filePayload)
7. 输入框显示文件：调用 insertFile 方法，使用方式与图片类似。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】