Chat.js 1.4 KB
Newer Older
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
1
import React, { useState, useEffect } from 'react';
2
import { Form, Button, Row } from 'react-bootstrap';
우지원's avatar
ul    
우지원 committed
3
4
5


function Chat(props) {
JeongYeonwoo's avatar
merge    
JeongYeonwoo committed
6
7
  // let defaultname=''
  let defaultname = sessionStorage.getItem('name');
JeongYeonwoo's avatar
JeongYeonwoo committed
8

Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
9
10
11
  const [inner, setInner] = useState([''])
  const [chat, setChat] = useState([inner])   //object로 key는 보낸사람 value는 메세지

12
13
  function handleChange(e) {
    e.preventDefault()
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
14
    setInner(e.target.value)
15
16
17
18
    console.log(e.target.value)
  }

  function sendMsgCH(e) {
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
19
20
    e.preventDefault()
    props.setSingleChat(inner)
21
    props.sendMsg(e)
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
22
    setInner('')
23
24
  }

Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
25
26
27
  useEffect(() => {
    setChat([...chat, props.singleChat])
  }, [props.singleChat])
Choi Ga Young's avatar
aa    
Choi Ga Young committed
28

우지원's avatar
ul    
우지원 committed
29
  return (
JeongYeonwoo's avatar
JeongYeonwoo committed
30

우지원's avatar
ul    
우지원 committed
31
    <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}>
32
      <h2>현재 {props.roomName} 입니다.</h2>
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
33
      {      chat.map((value, index) => (
34
        <Row key={index} className='ml-3'>
JeongYeonwoo's avatar
merge    
JeongYeonwoo committed
35
          {props.roomName}에서 {defaultname}님이 보낸 메세지 : {value}
36
37
        </Row>
      ))}
우지원's avatar
ul    
우지원 committed
38
      <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
39
      <Form onSubmit={sendMsgCH}>
우지원's avatar
ul    
우지원 committed
40
        <Form.Group>
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
41
          <Form.Control name='chat' type="text" value={inner} onChange={handleChange} />
우지원's avatar
ul    
우지원 committed
42
43
44
45
        </Form.Group>
        <Button variant="primary" type="submit">
          전송
        </Button>
46
      </Form>
우지원's avatar
ul    
우지원 committed
47
48
49
50
51
52
53
    </div>


  );
}

export default Chat;