[React] Day 7 - Create 구현 1

mode 변경 기능

App.js 추가내용

import Control from "./components/Control";

<Control onChangeMode={function (_mode) {
    this.setState({
    mode: _mode
});}.bind(this)}>
</Control>

추가된 components 하위 파일 Control.js

import React, { Component } from 'react';

class Control extends Component {
  render() {
    return (
      <ul>
        <li><a
          href="/create"
          onClick={function (e) {
            e.preventDefault();
            this.props.onChangeMode('create');
          }.bind(this)}>create</a></li>
        <li><a
          href="/update"
          onClick={function (e) {
            e.preventDefault();
            this.props.onChangeMode('update');
          }.bind(this)}>update</a></li>
        <li><input onClick={function (e) {
          e.preventDefault();
          this.props.onChangeMode('delete');
        }.bind(this)} type="button" value="delete"></input></li>
      </ul>
    );
  }
}

export default Control;

 

➡️각각 App.js와 Conreol에 내용을 추가함으로써 mode를 변경한다.

 

mode 전환과 onSubmit 이벤트

➡️create 버튼을 누르면 mode가 create로 바뀌고, ReadContent대신 CreateContent를 띄우면서 title과 description을 직접 적어서 title과 desc 값으로 표현할 수 있는 이벤트 구현

 

📢우리가 적은 title과 description 값은 직접 확인하면 이 위치에서 확인 할 수 있다.

📢따라서 띄우고 싶은 title과 description 값을 변경해주려면 이 위치에서 가져올 수 있다.

App.js 추가내용

import ReadContent from "./components/ReadContent"
import CreateContent from "./components/CreateContent"

var _title, _desc, _article = null;

    if (this.state.mode === 'welcome') {
      _title = this.state.welcome.title;
      _desc = this.state.welcome.desc;
      _article = <ReadContent title={_title} desc={_desc}></ReadContent>;
    } else if (this.state.mode === 'read') {
      var i = 0;
      while (i < this.state.contents.length) {
        var now_data = this.state.contents[i];
        if (now_data.id === this.state.selected_content_id) {
          _title = now_data.title;
          _desc = now_data.desc;
        }
        i = i + 1;
      }
      _article = <ReadContent title={_title} desc={_desc}></ReadContent>;
    } else if (this.state.mode === 'create') {
      _article = <CreateContent onSubmit={function(_title, _desc){
        // add content to this.state.contents
        console.log(_title);
        console.log(_desc);
      }.bind(this)}></CreateContent>
    }

 

추가된 components 하위 파일 CreateContent.js

import React, { Component } from 'react';

class CreateContent extends Component {
  render() {
    return (
      <article>
        <h2>Create</h2>
        <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)}>
          <p><input type="text" placeholder="title" name="title"></input></p>
          <p><textarea name="desc" placeholder="description"></textarea></p>
          <p><input type="submit"></input></p>
        </form>
      </article>
    );
  }
}

export default CreateContent;

 

➡️각각 App.js와 Conreol에 내용을 추가함으로써 mode가 create로 변경될 시 ReacContent대신 CreateContent라는 title과 desc를 입력할 수 있는 입력창이 띄워지고, 각각 title값과 description 값을 입력하여 제출하면 콘솔창에서 각 title과 description 값을 확인 할 수 있다.