简介

博客项目重构后留言和评论功能一直没有emoji表情输入功能，在网上也没有找到比较好用的react组件，于是作者用了两周时间封装了一个输入框组件并发布到npm。
项目上线初期或多或少存在一些问题，如果在使用过程中遇到bug或者在功能上有更好的建议意见请留言告知。

效果


在线Demo请到西贝博客留言板页面体验

安装

npm install react-emotor

yarn add react-emotor

基本用法

输入框组件使用方法

输入框组件相对于普通的输入框添加了emoji表情输入功能，点击emoji表情后组件会将该emoji图片插入到输入框中并调用onChange函数向用户提供经过Unicode转码后的字符串，用户只需存储该字符串即可。

import React, { useRef } from 'react'
import { ReactEmojiEditor } from 'react-emotor'const App = () => {// 创建ref用于接收编辑框组件的节点对象,const emotor = useRef();// 组件内容改变回调函数function contentOnChange(content) {console.log(content);}// 清空组件内容function myClean() {console.log("clean");emotor.current.clean();}// 组件获取焦点function myFocus() {console.log("onFocus");emotor.current.onFocus();}return (<div><ReactEmojiEditorref={emotor}className='myClassName'id="myEmotor"defaultValue='this is default value 												


											

带emoji表情的react输入框组件相关推荐
	

    
								
  1. android手机自带表情符号,android系统自带Emoji表情与表情描述互相转换
		
    前言 Emoji表情几乎都是有表情描述的,如愤怒的表情会有[愤怒],这样的描述,这里就是举了个列子,至于是什么样的表现形势,这是可以自己定义的.那么这样,一个表情带一个表情描述的好处就是,当我们发送信 ...
    
		
    2. 
						
  2. php过滤处理手机自带Emoji表情
		
    php过滤处理手机自带Emoji表情 // 过滤掉emoji表情public function filterEmoji($str){$str = preg_replace_callback('/./u ...
    
		
    3. 
						
  3. mysql插入表情_向MySQL数据库中插入带emoji表情符的数据时报错
		
    问题:向MySQL数据库中插入带emoji表情符的数据时报错 原因:utf8字符集不支持emoji表情符,需要改为utf8mb4字符集(utf8mb4是MySQL在5.5.3之后增加的,实际开发中建议 ...
    
		
    4. 
						
  4. 支持emoji表情的文本输入框
		
    分享一下最近做的一个emoji表情输入框,在别人的基础上修改了的,效果如下. 代码结构长这样 组件地址:emojiInput/emojiInput at master · panqinqin/emoj ...
    
		
    5. 
						
  5. 移动前端手机输入法自带emoji表情字符处理
		
    原文链接 : https://blog.csdn.net/binjly/article/details/47321043 今天,测试给我提了一个BUG,说移动端输入emoji表情无法提交.很早以前就有 ...
    
		
    6. 
						
  6. oracle存储emoji表情,Android自带emoji表情的使用方法详解
		
    什么是emoji表情 emoji表情是一种表情符号,在代码中它现在其实是一组遵循Unicode的编码,即每一个表情符号都对应了一个Unicode编码.更进一步说,emoji表情实际上是一组Unicod ...
    
		
    7. 
						
  7. Mysql怎么把微信昵称（带emoji表情）保存到数据库，亲测可用
		
    问题描述: 如果UTF8字符集且是Java服务器的话,当存储含有emoji表情时,会抛出类似如下异常: java.sql.SQLException: Incorrect string value: ' ...
    
		
    8. 
						
  8. PHP处理微信中带Emoji表情的消息发送和接收(Unicode字符转码编码)
		
    在进行微信公众号开发者接入的时候,与用户的对话互动中,涉及到的文本信息不仅仅是文字那么简单,其中可能还会包含着各种表情字符,例如「emoji表情」. 百科:  Emoji 由于微信接口中对于emoji ...
    
		
    9. 
						
  9. 写一段情人节耳钉礼物文案，要求100字左右，以小红书的形式展示，带emoji表情包，带分段，吸引眼球，情绪化，最后加一些tag...
		
    ❤️情人节特别礼物❤️ 爱你❤️不仅仅是因为你是我的最爱,更因为你是我生命中不可或缺的一部分. 这个情人节,献上我最真挚的爱意:一对精美的耳钉,镶嵌着世界上最珍贵的宝石--心形红宝石. 这对耳钉不仅仅 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. Objective-C设计模式——外观Faced（接口适配）
		
    2. 
						
  2. 运用Edraw为WPF应用程序嵌入Office文档的方法总结
		
    3. 
						
  3. npm install对本地工程文件造成了哪些修改
		
    4. 
						
  4. 电脑知识：分享几款常用的截屏方法，欢迎收藏！
		
    5. 
						
  5. word List32
		
    6. 
						
  6. 空白世界地图打印版_考研准考证打印什么时候_中国研究生招生信息网官网
		
    7. 
						
  7. numpy中int类型与python中的int
		
    8. 
						
  8. mac本常用快捷键大全
		
    9. 
						
  9. Apollo课程学习2——高精地图HD Map
		
    10. 
						
  10. 什么是域名？什么网站名？什么是URL？
		
    11. 
						
  11. img、link、html使用样式
		
    12. 
						
  12. 前置：API:DSP:核心交换机：边界网关协议：边界：（防御）防火墙：负载均衡：摆渡机：名词解释
		
    13. 
						
  13. 方差分析——单因素方差分析
		
    14. 
						
  14. Api --String知识点
		
    15. 
						
  15. php__file__用法,PHP 的常量__FILE__的用法图解
		
    16. 
						
  16. 教女朋友学会用ESP8266实现wifi杀手——有固件
		
    17. 
						
  17. 为什么必须要数据清理？
		
    18. 
						
  18. java内存泄漏定位和解决，学习路线+知识点梳理
		
    19. 
						
  19. 多路IO复用（Linux）
		
    20. 
						
  20. flarum 微信登录修改
		
    21. 
		

	


热门文章
	

    
									
  1. 隐马尔科夫模型java实现
			
    2. 
						
  2. eclipse的使用操作技巧
			
    3. 
						
  3. C语言的文件打开（多种方式），读写，关闭，文件指针偏移等操作，理解读写原理
			
    4. 
						
  4. trunk vlan pvid 学习实验整理 2
			
    5. 
						
  5. 神经网络方法研究及应用,基于神经网络的控制
			
    6. 
						
  6. 解决 Push failed: Unable to access 'https://github.com/...': Failed to connect ...Connection Refused
			
    7. 
						
  7. java verify_java – 什么时候使用Mockito.verify()？
			
    8. 
						
  8. “收藏本站”，“设为首页”的脚本
			
    9. 
						
  9. Python基础篇：你好，世界！
			
    10. 
						
  10. 阿里云ClickHouse海量数据分析
			
    11.