들어가기 전에

이전 시간에 <CreateContent> 라고 하는 컴퍼넌트를 구현을 했습니다.

<CreateContent> 컴퍼넌트에 onSubmit 이벤트를 추가해보겠습니다.

학습목표

이벤트가 발생할 때 해당 이벤트의 target이 되는 값을 전달할 수 있습니다.

핵심단어

• onSubmit
• event

강의듣기

이번 시간에는 사용자가 submit 버튼을 클릭했을 때 onSubmit 이벤트가 실행되고 createContent 컴퍼넌트를 가져다 쓰고 있는 App 컴포넌트의 contents 끝에 데이터를 추가하는 방법을 살펴보겠습니다.

우선 submit 버튼이 클릭했을 때 createContent의 이벤트로 설치된 함수를 실행시켜야 합니다.

_article = <CreateContent onSubmit={function(_title, _desc){
     // add content to this.state.contents
}.bind(this)}></CreateContent>

onSubmit 이벤트를 만들고 그 이벤트가 발생했을 때 실행되는 함수의 입력 값으로 _title과 _desc 가 전달될 수 있다면

setState 를 통해서 새로운 content값을 추가하면 됩니다.

이를 위해서 form 태그의 onSubmit 이벤트에서 this.props.onSubmit() 를 통해 createContent의 onSubmit이라고 하는 props를 호출합니다.

이때 첫 번째 인자에 는 title, 두번째 인자에는 desc를 줘야합니다. 

어떻게 하면 그 값을 가져올 수 있을까요?

debugger 코드를 추가해서 submit 버튼을 클릭할 때 e라고 하는 이벤트 객체를  찾아보겠습니다.

이 이벤트 객체의 target 라고 하는 property가 <form> 자체를 가리킵니다.

e.target에 해당하는 form의  title이 위의 네모 부분이고 title의 value에 해당하는 값은 "React"가 됩니다.

Console 창을 통해 e.target.title.value를 확인해보면 "React" 인 것을 확인할 수 있습니다.

이런 사실을 바탕으로 this.props.onSubmit() 의 첫 번째 인자로 e.target.title.value 값, 두번째 인자로 e.target.desc.value 값을 줄 수 있습니다.

<form action="/create_process" method="post"
    onSubmit={function(e){
        e.preventDefault();
        this.props.onSubmit(
            e.target.title.value,
            e.target.desc.value
        );
        alert('Submit!!!!!');
    }.bind(this)}
>

this.props.onSubmit( e.target.title.value, e.target.desc.value ) 가 호출될 때 값이 잘 전달되는지 Console의 log를 통해 확인할 수 있습니다. 

이렇게 해서 title 값과 desc 값을 얻게 되었습니다.

다음시간에는 이렇게 얻은 title 과 desc 값을 state의 content 끝에 추가해주는 작업을 해보겠습니다.

생각해보기

event 객체에 대해 자유롭게 공부해보세요.