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仓库地址：打开⽅式$ git clone $ 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, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
}
}
render () {
return  (
<Fragment >
<OutterContainer >
<InputOutter >
{/*⽤可编辑的div 代替textarea 承担输⼊功能:*/}
<div className ='inputDiv'
ref ={(inputDiv ) => { this .inputDiv = inputDiv }}
--
ref={(inputDiv)=>{this.inputDiv = inputDiv }}
contentEditable={true}
style={{ height:'auto'}}
onKeyUp={this.divInput.bind(this)}
/>
<BtnContainer>
<div style={{display:"flex",justifyContent:"space-around",alignItems:"center",width:"100%"}}>
<Icon
onClick={this.showEmojiTab.bind(this)}
type="smile"
style={{ color:this.state.showEmojiTab ?'#1890FF':'#555', fontSize:"1.2em",outline:"none",display:"flex",justifyContent:"center",alignI tems:"center"}}
/>
{
this.state.hyperText?
<SendBtn onClick={this.sendMsg.bind(this)}>发送</SendBtn>:
<SendBtn style={{color:"#999",background:"#ddd"}}>发送</SendBtn>
}
</div>
</BtnContainer>
</InputOutter>
{/*emoji表情选择栏，默认折叠，点击图标展开*/}
<EmojiTab style={{height:this.state.showEmojiTab?"40vw":"0"}}>
{jiList.map((item, index)=><div key={index}>
<img alt="" data-index={index} onClick={this.chooseEmoji.bind(this,item)} src={`/emoji/emoji${item}.svg`}/>
</div>)}
</EmojiTab>
</OutterContainer>
</Fragment>
)
}
//控制表情栏展开折叠
showEmojiTab(){
this.setState({
showEmojiTab:!this.state.showEmojiTab
})
}
//选择表情
chooseEmoji(index){
this.inputDiv.innerHTML+=`<img src="/emoji/emoji${index}.svg" />`;
this.divInput.call(this);
}
//⽂本框输⼊事件：
divInput(){
this.setState({
hyperText:this.inputDiv.innerHTML
})
}
//发送消息事件：
sendMsg(){
console.log('即将发送的msg内容:\n',this.state.hyperText)
this.inputDiv.innerHTML='';
svg交互是什么this.setState({
hyperText:'',
showEmojiTab:false
})
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。