Create 구현 - form, onSubmit

Form

폼 기능을 추가하기 위해 CreateContent의 form을 추가시켰다. 

import React, { Component } from 'react';

class CreateContent extends Component {
  render() {
    console.log('Content render');
    return (
      <article>
        <h2>Create</h2>
        <form action="/create_process" method="post"
          onSubmit={function (e) {
            e.preventDefault();
            alert('Submit selected');
          }.bind(this)}
        >
          <p><input type="text" name="title" placeholder="title"></input></p>
          <p>
            <textarea name="desc" placeholder="description"></textarea>
          </p>
          <p>
            <input type="submit"></input>
          </p>
        </form>
      </article>
    );
  }
}

export default CreateContent;

action : 데이터를 전송할 장소

method = "post" : URL의 노출을 막음. post를 사용하는것이 좋음.

onSubmit = submit 버튼을 누른다면 그 해당 이벤트를 실행되도록 약속되어 있다.

 

onSubmit 기능추가

기능 추가를 위해 App.js에 onSubmit 코드를 추가시켰다.

//기존코드
else if (this.state.mode === 'create') {
      _article = <CreateContent></CreateContent>
    }

//변경코드
else if (this.state.mode === 'create') {
      _article = <CreateContent onSubmit={function(_title, _desc){
        console.log(_title, _desc);
      }.bind(this)}></CreateContent>
    }

 

또한 form을 추가할때 alert만 해놓은 onSubmit을 바꾸어준다.

// 기존코드
	<form action="/create_process" method="post"
          onSubmit={function (e) {
            e.preventDefault();
            alert('Submit selected');
          }.bind(this)}
          >

//변경코드
<form action="/create_process" method="post"
          onSubmit={function (e) {
            e.preventDefault();
            this.props.onSubmit(
              e.target.title.value,
              e.target.desc.value
            );
          }.bind(this)}
        >

- e 라는 event객체를 통해 접근

- target은 form 자체를 가리킨다.

- title.value는 입력된 타이틀명, desc.value는 본문이다.

 

결과