Chat.js 1021 Bytes
Newer Older
Choi Ga Young's avatar
Choi Ga Young committed
1
import React from 'react';
2
import { Form, Button, Row } from 'react-bootstrap';
우지원's avatar
ul    
우지원 committed
3
4
5


function Chat(props) {
Choi Ga Young's avatar
aa    
Choi Ga Young committed
6
  let defaultname = sessionStorage.getItem('name');
JeongYeonwoo's avatar
JeongYeonwoo committed
7

8
9
10
11
12
13
14
15
16
17
  function handleChange(e) {
    e.preventDefault()
    props.setInner(e.target.value)
    console.log(e.target.value)
  }

  function sendMsgCH(e) {
    props.sendMsg(e)
  }

Choi Ga Young's avatar
aa    
Choi Ga Young committed
18

우지원's avatar
ul    
우지원 committed
19
  return (
JeongYeonwoo's avatar
JeongYeonwoo committed
20

우지원's avatar
ul    
우지원 committed
21
22
    <div className="chat" id="chat" style={{ border: "2px solid", height: "300%", margin: "1%", borderColor: "#BDBDBD" }}>
      <Button variant="light" onClick={props.handleChatc} >{`<`}</Button>
Choi Ga Young's avatar
aa    
Choi Ga Young committed
23

24
25
26
      <h2>현재 {props.roomName} 입니다.</h2>
      {      props.chatmsg.map((value, index) => (
        <Row key={index} className='ml-3'>
Choi Ga Young's avatar
aa    
Choi Ga Young committed
27
          {props.roomName}에서 {defaultname}님이 보낸 메세지 : {value}
28
29
30
31
32
33
34
        </Row>
      ))}

      <Form onSubmit={sendMsgCH}>
        <Form.Control name='msg' type='text' onChange={handleChange} />
        <Button variant="primary" type="submit">전송</Button>
      </Form>
우지원's avatar
ul    
우지원 committed
35
36
37
38
39
40
41
    </div>


  );
}

export default Chat;