发送消息和接收消息左右位置不对
来源:10-6 聊天功能实现-下

慕粉1461502176
2018-03-17
import React from 'react'
import {List,InputItem,NavBar} from 'antd-mobile'
import io from 'socket.io-client'
import {connect} from 'react-redux'
import {getMsgList,sendMsg,recvMsg} from '../../redux/chat.redux'
const socket = io('ws://localhost:9093')
@connect(
state=>state,
{getMsgList,sendMsg,recvMsg}
)
class Chat extends React.Component{
constructor(props){
super(props)
this.state ={text:'',msg:[]}
}
componentDidMount(){
this.props.getMsgList()
this.props.recvMsg()
}
handleSubmit(){
const from = this.props.user._id
const to = this.props.match.params.user
const msg = this.state.text
this.props.sendMsg({from,to,msg})
this.setState({text:''})
}
render(){
const user = this.props.match.params.user
const Item = List.Item
return(
<div id='chat-page'>
<NavBar mode='dark'>
{this.props.match.params.user}
</NavBar>
{this.props.chat.chatmsg.map(v=>{
return v.from===user?(
<List key={v._id}>
<Item>{v.content}</Item>
</List>
):(
<List key={v._id}>
<Item
extra={'avatar'}
className='chat-me'>{v.content}</Item>
</List>
)
})}
<div className="stick-footer">
<List>
<InputItem
placeholder="请输入"
value={this.state.text}
onChange={v=>{
this.setState({text:v})
}}
extra={<span onClick={()=>this.handleSubmit()}>发送</span>}
>信息</InputItem>
</List>
</div>
</div>
)
}
}
export default Chat
发送方:
接收方为什么都是右边的:
3回答
-
qq_孔洁钰May_03759002
2019-01-07
我也是...你是如何解决的?
00 -
慕勒458955
2018-12-05
我也是这样。。。
00 -
慕瓜8449030
2018-03-22
hi 你好,这个问题qq群私聊我把,完整代码发我 我试试解决下
00
Redux+React Router+Node.js全栈开发
1822 学习 · 750 问题
相似问题
回答 1
回答 2