[React 따라하기 #12] React Form

HTML 의 form 과 같습니다.

예제.

See the Pen form01 by Seunggeun Oh (@seunggeun-oh) on CodePen.

여기서 이건 외워야 합니다. WebStorm 이나 VSCode 는 . 찍거나 ctrl+space 하면 뒤에 힌트가 나오긴하지만, 그래도 어느정도는 알고 있어야 선택도 하겠죠.

event.target.value

event.target 은 <input> 입니다. 그것의 value 입니다.

See the Pen form02 by Seunggeun Oh (@seunggeun-oh) on CodePen.

여기서 외울건 myChangeHandler() 에 있는

this.setState({[name]: val});

이렇게 변수에 state 의 변수명칭이 있을 때 대괄호(square bracket)로 감싸야 합니다.

그리고 event.target.name 과 event.target.value

<input type='text' name='username' onChange={this.myChangeHandler} value='' />

event.target.name 은 username 이고
event.target.value 는 입력된 값입니다.

input에 입력하는 도중에 form 의 하단에 오류 메시지를 보여줍니다.

See the Pen form03 by Seunggeun Oh (@seunggeun-oh) on CodePen.

728x90

[React 따라하기 #14] React sass (0)	2020.01.03
[React 따라하기 #13] React 에서 css 적용하기 (3)	2020.01.03
[React 따라하기 #11] React Event 리액트 이벤트 (0)	2020.01.02
[React 따라하기 #10] React 기본 함수 (life cycle) (382)	2020.01.02
[React 따라하기 #9] React State (0)	2019.12.31

개발인생