大家好,我是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年我也会尽自己所能书写更多前端教程,期待你的关注~