FilesExpand file tree

 master

/

EventPractice.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

51 lines (50 loc) · 1.15 KB

 master

/

EventPractice.js

Copy path

Top

File metadata and controls

• Code
• Blame

51 lines (50 loc) · 1.15 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

51

import React, { useState } from 'react';

const EventPractice = () => {

const [form, setForm] = useState({

username: '',

message: ''

});

const { username, message } = form;

const onChange = e => {

setTimeout(() => console.log(e), 500);

const nextForm = {

...form, // 기존의 form 내용을 이 자리에 복사 한 뒤

[e.target.name]: e.target.value // 원하는 값을 덮어씌우기

};

setForm(nextForm);

};

const onClick = () => {

alert(username + ': ' + message);

setForm({

username: '',

message: ''

});

};

const onKeyPress = e => {

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

onClick();

}

};

return (

<div>

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

<input

type="text"

name="username"

placeholder="유저명"

value={username}

onChange={onChange}

/>

<input

type="text"

name="message"

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

value={message}

onChange={onChange}

onKeyPress={onKeyPress}

/>

<button onClick={onClick}>확인</button>

</div>

);

};

export default EventPractice;