当表情包成了打工人的「摸鱼暗号」：手把手教你用 React 搞个会说话的 emojiPicker_electron+react 使用emoji-picker-element 表情功能-CSDN博客

本文链接：https://blog.csdn.net/scr0425/article/details/146302606

什么是表情包？

表情包（Emoji）是一种用于表达情感、想法或概念的图形符号。它们通常以卡通化的形式呈现，涵盖各种表情、物体、动物、食物、活动等。表情包广泛应用于聊天、社交媒体、邮件等场景，能够以直观的方式传递情感和信息，增强沟通的趣味性和表现力。

常见的表情包包括：

表情：😊（微笑）、😢（哭泣）、😡（生气）等。
物体：📱（手机）、🍕（披萨）、🎁（礼物）等。
动物：🐶（狗）、🐱（猫）、🐼（熊猫）等。
符号：❤️（爱心）、⭐（星星）、✅（对勾）等。

一、当代年轻人的「社交黑话」：表情包是如何统治聊天框的？

早上 9:00，老板发来消息：「小王，这个需求今天能上线吗？」
你盯着屏幕憋出三个「好的👌」，最后默默补上一个「🐶」——
这届年轻人早已学会：能用表情包甩锅的，绝不多打一个字！

表情包（Emoji）是什么？
是当代社畜的「情绪防弹衣」，是 00 后整顿职场的「摸鱼暗号」，更是聊天框里的「灵魂画师」。从「裂开💥」到「苦涩😢」，从「暗中观察👀」到「敷衍点头🙂」，2800 + 个 emoji 组成了我们的「赛博方言」。

（隔壁工位小哥：上次给女神发「多喝热水🥛」，她回了个「👊💢」，现在还在跪搓衣板...）

二、常见表情包の「职场生存指南」

表情	学名	适用场景	隐藏含义
🚀	火箭	工作群甩锅	「需求已肝，锅别甩我」
🍉	吃瓜	摸鱼围观	「这瓜保真？我带勺了」
🤔	思考	被老板 Q 到	「让我装装在想方案」
💸	钞票	谈涨薪时	「别画饼，直接打钱」
😄	微笑	面对甲方	「你说的都对（咬牙）」

（温馨提示：慎用「🙂」，90% 的中老年聊天对象会理解为「嘲讽」）

接下来的代码要实现的效果

首先要下载npm包

npm i emoji-picker-react

三、搞个会呼吸的表情包组件：Edge 浏览器の独家快乐

1. 组件属性 (`EmojiPickerModuleProps`)

visible：控制表情包弹框是否显示。
onEmojiClick：当用户点击某个表情包时触发的回调函数，返回选中的表情包。
onClose：关闭表情包弹框的回调函数。

interface EmojiPickerModuleProps {
  visible: boolean; // 控制弹框「闪现」（默认：隐身术大师）
  onEmojiClick: (emoji: string) => void; // 选中表情的「报菜名」回调
  onClose: () => void; // 点击外卖小哥「取消订单」的回调
}
// 翻译成人话：
// visible：要不要让表情包盒子蹦出来？（true：蹦！false：藏！）
// onEmojiClick：选了哪个表情，赶紧告诉父组件（比如：把😘塞进输入框）
// onClose：点击外面空白处，盒子「咻」地消失（防老板突击检查！）

2. 点击外部关闭弹框的逻辑

使用 useRef 创建一个引用 emojiPickerRef，用于指向表情包弹框的 DOM 元素。
通过 useEffect 监听点击事件，如果点击事件发生在弹框外部，则调用 onClose 关闭弹框。

const handleClickOutside = (event: MouseEvent) => {
  if (emojiPickerRef.current && !emojiPickerRef.current.contains(event.target)) {
    onClose(); // 老板来了！快藏起表情包！
  }
};
// 原理：当点击位置不在表情包盒子里（比如点到老板的消息框），立刻隐身！
// 副作用：偶尔会误关——比如你正激情选「🤬」骂产品经理时...

 // 添加点击事件监听器
    useEffect(() => {
        if (visible) {
            document.addEventListener('mousedown', handleClickOutside);
        } else {
            document.removeEventListener('mousedown', handleClickOutside);
        }
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [visible]);

3. 表情包选择器的渲染

使用 emoji-picker-react 库提供的 EmojiPicker 组件。
当用户点击某个表情包时，调用 onEmojiClick 回调，将选中的表情包传递给父组件。

return (
  <div 
    ref={emojiPickerRef}
    style={{
      position: 'fixed', // 钉在右下角，摸鱼时一伸手就够到
      bottom: '80px', // 避开底部工具栏，防止被输入法吃掉
      right: '20px', // 右撇子友好位
      zIndex: 1000, // 比老板的消息框优先级高（战术性眨眼）
      boxShadow: '0 4px 12px rgba(0,0,0,0.15)' // 加个阴影，显得更「贵」
    }}
  >
    <EmojiPicker onEmojiClick={e => onEmojiClick(e.emoji)} />
  </div>
);
// 视觉设计：像外卖保温箱一样「咻」地弹出，用完即走不占地方~

四、组件粘贴即用（TS 党狂喜）

1.调用使用

tsx

// 父组件调用：
const [message, setMessage] = useState('');
const [showEmoji, setShowEmoji] = useState(false);

{/* 摸鱼开关：点击笑脸图标，表情包盒子蹦迪！ */}
<div onClick={() => setShowEmoji(!showEmoji)}>
  <SmileIcon style={{ fontSize: '24px', cursor: 'pointer' }} />
  {showEmoji ? '点我藏表情包' : '点我偷表情'}
</div>

{/* 表情包军火库：Edge专属供应！ */}
<EmojiPickerModule
  visible={showEmoji}
  onEmojiClick={emoji => setMessage(m => m + emoji + ' ') // 自动加空格，防止表情打架
  onClose={() => setShowEmoji(false)} // 老板来了！秒关！
/>

2.封装的组件

import React, { useRef, useEffect } from 'react';
import EmojiPicker from 'emoji-picker-react';

interface EmojiPickerModuleProps {
    visible: boolean; // 控制是否显示表情包弹框
    onEmojiClick: (emoji: string) => void; // 表情点击回调
    onClose: () => void; // 关闭表情包弹框的回调
}

const EmojiPickerModule = ({ visible, onEmojiClick, onClose }: EmojiPickerModuleProps) => {
    const emojiPickerRef = useRef<HTMLDivElement>(null);

    // 点击外部关闭弹框的逻辑
    const handleClickOutside = (event: MouseEvent) => {
        if (emojiPickerRef.current && !emojiPickerRef.current.contains(event.target as Node)) {
            onClose(); // 调用父组件传递的关闭回调
        }
    };

    // 添加点击事件监听器
    useEffect(() => {
        if (visible) {
            document.addEventListener('mousedown', handleClickOutside);
        } else {
            document.removeEventListener('mousedown', handleClickOutside);
        }
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [visible]);

    if (!visible) return null; // 如果不显示，直接返回 null

    return (
        <div
            ref={emojiPickerRef}
            style={{
                position: 'fixed', // 固定定位
                bottom: '80px', // 距离底部 80px
                right: '20px', // 距离右侧 20px
                zIndex: 1000, // 确保弹框在最上层
                backgroundColor: '#fff', // 背景色
                borderRadius: '8px', // 圆角
                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', // 阴影
            }}
        >
            <EmojiPicker onEmojiClick={(event) => onEmojiClick(event.emoji)} />
        </div>
    );
};

export default EmojiPickerModule;