[리액트] 폼으로 전송한 속성 위치 확인하는 법(debugger)

<예제 내용>

 

아티클을 생성하는 CreateArticle 컴포넌트를 만들고,

App.js에서 onSubmit이라는 함수를 통해 자식 CreateArticle 컴포넌트로부터 매개변수 _title과 _desc를 전송받는다.

CreateArticle 컴포넌트의 form 폼으로 전송된 속성 값을 onSubmit 함수를 통해 App.js에 보내고 state에 생성한다.

---

폼으로 전송한 속성 위치 확인하는 법

 

폼을 통해 임의로 '타이틀'과 '설명' 값을 전송하였다.

전송된 값의 위치를 확인하기 위해 debugger;를 이용하여 멈춰두고 개발자 도구에서 값이 저장된 위치를 확인한다.

 

 

 

App.js

    let _title,
      _desc,
      _article = null; //변수 초기화 선언
      
 else if (this.state.mode == "create") {
      _article = (
        <CreateArticle onSubmit={function (_title, _desc) {}.bind(this)} />
      ); //create모드에서 onSubmit이라는 함수를 통해 컴포넌트에서 매개변수 _title과 _desc를 받음
    }

 

CreateArticle 컴포넌트

          <form
            action=""
            method="post"
            onSubmit={function (e) {
              e.preventDefault();
              alert("제출");
              debugger; //debugger를 통해 개발자 도구에서 멈추고 속성값 확인 가능
              this.props.onSubmit();
            }.bind(this)}
          >
            <p><input type="text" name="title" placeholder="title" /></p>
            <p><textarea name="message" placeholder="description"></textarea></p>
            <p><input type="submit" value="전송" /></p>
          </form>

 

 

개발자도구

debugger에서 멈춰 있는 것을 확인할 수 있음.

컴포넌트 안에서 onSubmit 함수에서 매개변수  e로 받았기 때문에,

e 매개변수 안에서 폼으로 전송한 타이틀과 설명 값을 찾을 수 있다.

 

개발자 도구를 확인해보면 아래 위치에 저장된 값을 확인할 수 있다.

 

"타이틀"은

위치 1) e.target[0].value

위치 2) e.target.title.value  (input에서 name="title"로 받음)

 

"설명"은

위치 1) e.target[1].value

위치 2) e.target.message.value (input에서 name="message"로 받음)

 

 

확인한 값의 저장된 위치를 컴포넌트에 반영하고 App.js는 매개변수 _title, _desc 로 받는다.

 

Create Article 컴포넌트

          <form
            action=""
            method="post"
            onSubmit={function (e) {
              e.preventDefault();
              this.props.onSubmit(e.target.title.value, e.target.message.value);
            }.bind(this)}
          >
            <p><input type="text" name="title" placeholder="title" /></p>
            <p><textarea name="message" placeholder="description"></textarea></p>
            <p><input type="submit" value="전송" /></p>
          </form>

 

App.js

else if (this.state.mode == "create") {
      _article = (
        <CreateArticle
          onSubmit={function (_title, _desc) {
            this.max_menu_id += 1;
            this.state.menus.push({
              id: this.max_menu_id,
              title: _title,
              desc: _desc,
            });
            this.setState({
              menus: this.state.menus,
            });
            console.log(this.state.menus);
          }.bind(this)}
        />
      );
    }

---

* 잘못된 정보 및 오류가 있을 경우 댓글에 적극적으로 말씀 부탁드립니다. 수정, 보완 하겠습니다.