import React, { useState } from 'react'
function Chat() {
const [messages,setMessages]=useState([])
const [inputValue,setInputValue]=useState('')
const Input=(e)=>{
setInputValue(e.target.value)
}
const submit=(e)=>{
e.preventDefault();
if(inputValue.trim!==''){
setMessages([...messages,inputValue])
setInputValue('')
}
}
return (
<div>
<h2>聊天室</h2>
<div>
{
messages.map((item,index)=>{
return (
<div key={index} style={{display:'flex'}}>
<img style={{width:'45px',height:'45px'}} src='https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' alt=''></img>
<p style={{marginLeft:'20px',marginBottom:'30px'}}>{item}</p>
</div>
)
})
}
</div>
<form onSubmit={submit}>
<input type='text' onChange={Input} value={inputValue}></input>
<button type='submit'>发送</button>
</form>
</div>
)
}
export default Chat