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

本文最后更新于:2022年2月18日 中午

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

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

一、确定需求

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

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

image.png

二、书写样式

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

Textarea:规定文本输入框的值、输入触发的回调函数等等。
Space:美化行内间距。
Button:定义发送的按钮。
(1)先从antd导入需要的组件和图标

image.png

(2)对组件进行排版
  1. 表情添加showModal事件来打开弹窗
  2. 给文本域添加onChange事件,每次键盘输入文字或选择表情进行输入都可以监听到
  3. Button发送按钮添加sendMessage事件
    image.png
    其中 smileHover 类定义为鼠标放上去字体变蓝即可实现上图的效果

image.png

三、核心代码

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

image.png

其中<Row>组件动态渲染,数组为emojiList,渲染一列列<Col>组件
emojiList数组自定义,想放哪些表情就放哪些进去
表情可通过下面EMOJIALL网址进行查找,复制黏贴即可

全部Emoji | EmojiAll

image.png

2. 进行核心代码的编写

思路:

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

image.png

2. 点击你要选择的表情后触发handleOk事件,关闭弹窗并将表情添加到文本域内。
3. 由于在Col组件渲染时给每个表情都添加了handleOk的点击事件并传入对应的表情。
4. 点击Button发送按钮触发sendMessage事件即可

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

image.png

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

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

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

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

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

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


作者:Smooth

文章链接:http://example.com/2022/02/13/React%E5%AE%9E%E6%88%98/

版权说明:本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!