FilesExpand file tree

 master

/

EventPractice.class.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

50 lines (49 loc) · 1.13 KB

 master

/

EventPractice.class.js

Copy path

Top

File metadata and controls

• Code
• Blame

50 lines (49 loc) · 1.13 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

// 클래스형 컴포넌트로 구현한 EventPractice

import React, { Component } from 'react';

class EventPractice extends Component {

state = {

username: '',

message: ''

};

handleChange = e => {

this.setState({

[e.target.name]: e.target.value

});

};

handleClick = () => {

alert(this.state.username + ': ' + this.state.message);

this.setState({

username: '',

message: ''

});

};

handleKeyPress = e => {

if (e.key === 'Enter') {

this.handleClick();

}

};

render() {

return (

<div>

<h1>이벤트 연습</h1>

<input

type="text"

name="username"

placeholder="유저명"

value={this.state.username}

onChange={this.handleChange}

/>

<input

type="text"

name="message"

placeholder="아무거나 입력해보세요"

value={this.state.message}

onChange={this.handleChange}

onKeyPress={this.handleKeyPress}

/>

<button onClick={this.handleClick}>확인</button>

</div>

);

}

}

export default EventPractice;