React实战：使用Antd+EMOJIALL 实现emoji表情符号的输入

大家好，我是Smooth，一名大二的前端爱好者，目标是想要成为一名高级前端开发工程师

本文是我在进行一个React项目的开发时，发表内容方面有输入表情符号的拓展需求，通过一段时间的查找及实践后，完成了此需求，同时也借此机会向大家分享我的思路。

一、确定需求

首先我们要明确我们实现的大概思路是什么

在点击输入框下方的表情键后弹出选择表情的弹窗，选择表情后关闭弹窗，选择的表情自动追加到文本域的最后一位。

二、书写样式

1. 使用antd的Textarea、Space、Button组件以及@ant-design/icons实现样式

Textarea：规定文本输入框的值、输入触发的回调函数等等。

Space：美化行内间距。

Button：定义发送的按钮。

（1）先从antd导入需要的组件和图标

（2）对组件进行排版

1. 给表情添加showModal事件来打开弹窗
2. 给文本域添加onChange事件，每次键盘输入文字或选择表情进行输入都可以监听到
3. 给Button发送按钮添加sendMessage事件
   

   其中 smileHover 类定义为鼠标放上去字体变蓝即可实现上图的效果

三、核心代码

1. 从antd导入Modal组件并在其内部的Row组件动态渲染Col组件

其中<Row>组件动态渲染，数组为emojiList，渲染一列列<Col>组件

emojiList数组自定义，想放哪些表情就放哪些进去

表情可通过下面EMOJIALL网址进行查找，复制黏贴即可

全部Emoji | EmojiAll

2. 进行核心代码的编写

思路：

1. 点击表情触发showModal事件打开弹窗。

2. 点击你要选择的表情后触发handleOk事件，关闭弹窗并将表情添加到文本域内。

3. 由于在Col组件渲染时给每个表情都添加了handleOk的点击事件并传入对应的表情。

4. 点击Button发送按钮触发sendMessage事件即可

关于Modal组件及实现的关键代码，已进行了注释说明

以上便是这篇教程的全部内容啦

最后，我叫Smooth，在今年2022年我也会尽自己所能书写更多前端教程~

掘金：https://juejin.cn/user/1302297507801358

CSDN：https://i.csdn.net/#/user-center/profile

最近发文计划为 Webpack 以及 性能优化 知识体系

同时也可扫码关注我的公众号，公众号同步更新