react实现仿微信聊天输入框

react实现仿微信聊天输入框

• 实现原理：
  • 利用H5提供的元素可编辑属性 contentEditable 使普通的html元素具有和输入框一样的编辑功能
• 其他实现方式（较复杂）：
  • 使用textarea作为输入框
  • 准备一个与textarea等宽的pre元素，用于计算内容高度，需要设置css {word-break:break-all} 否则可能不会自动换行
  • 输入的同时将value写入pre，然后获取pre的scrollHeight，将其赋给textare的height，以此实现textarea随内容自动调整大小
  • emoji输入：由于无法在textarea内直接渲染图片，普遍的做法是使用[^-]这种格式的字符代替emoji，在使用富文本时通过正则匹配[^-]，替换成对应的emoji图片进行渲染
• 缺陷
  • 需要直接操作dom，不符合MV*主义核心价值观
  • 依赖h5新属性
• 使用场景
  • 即时通讯
  • 留言、评论
• git仓库地址：https://github.com/DarthVaderrr/richTextInput.git

打开方式

• $ git clone https://github.com/DarthVaderrr/richTextInput.git
• $ npm i 安装运行所需依赖
• $ npm start 运行项目 默认在3000端口

截图

主要代码

import React, {
    Component, Fragment } from 'react';
import {
    Icon } from 'antd';//使用了一个antd的icon，如果你的项目没有使用antd，可以自己写个按钮样式，无须引入
import {
    OutterContainer, InputOutter, BtnContainer, SendBtn, EmojiTab } from './style' //使用styled-compoents自定义的样式组件，这样做可以避免组件里出现过多css代码
export default class HyperTextInput extends Component {
   
    constructor(props) {
   
        super(props)
        this.state = {
   
            textareaH: '8vw',
            hyperText:"",
            showEmojiTab: false,
            emojiList: [1, 2, 3, 4, 5, 6