React实战:使用Antd+EMOJIALL 实现emoji表情符号的输入
本文最后更新于:2022年2月18日 中午
大家好,我是Smooth,一名大二的前端爱好者,目标是想要成为一名高级前端开发工程师
本文是我在进行一个React项目的开发时,发表内容方面有输入表情符号的拓展需求,通过一段时间的查找及实践后,完成了此需求,同时也借此机会向大家分享我的思路。
一、确定需求
首先我们要明确我们实现的大概思路是什么
在点击输入框下方的表情
键后弹出选择表情的弹窗,选择表情后关闭弹窗,选择的表情自动追加到文本域的最后一位。
二、书写样式
1. 使用antd的Textarea
、Space
、Button
组件以及@ant-design/icons
实现样式
Textarea
:规定文本输入框的值、输入触发的回调函数等等。
Space
:美化行内间距。
Button
:定义发送的按钮。
(1)先从antd导入需要的组件和图标
(2)对组件进行排版
- 给
表情
添加showModal
事件来打开弹窗 - 给文本域添加
onChange
事件,每次键盘输入文字或选择表情进行输入都可以监听到 - 给
Button
发送按钮添加sendMessage
事件其中 smileHover 类定义为鼠标放上去字体变蓝即可实现上图的效果
三、核心代码
1. 从antd导入Modal
组件并在其内部的Row
组件动态渲染Col
组件
其中<Row>
组件动态渲染,数组为emojiList
,渲染一列列<Col>
组件
emojiList
数组自定义,想放哪些表情就放哪些进去
表情可通过下面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
以及 性能优化 知识体系
同时也可扫码关注我的公众号,公众号同步更新
作者:Smooth
文章链接:http://example.com/2022/02/13/React%E5%AE%9E%E6%88%98/
版权说明:本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!