发送消息和接收消息左右位置不对

来源: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


发送方:

http://img.mukewang.com/szimg/5aad26a60001a1a414341246.jpg

接收方为什么都是右边的:

http://img.mukewang.com/szimg/5aad26c70001dbb526481894.jpg

写回答

3回答

qq_孔洁钰May_03759002

2019-01-07

我也是...你是如何解决的?

0
0

慕勒458955

2018-12-05

我也是这样。。。

0
0

慕瓜8449030

2018-03-22

hi 你好,这个问题qq群私聊我把,完整代码发我  我试试解决下

0
0

Redux+React Router+Node.js全栈开发

全网唯一的React 16+Redux+React Router4实战课程,学到手是你的真本领!

1822 学习 · 750 问题

查看课程