[React] ④ Update & Delete기능

❤Update

• Update 기능은 create + read

1) getReadContent(), getContent() 함수화

App.js

else if(this.state.mode === 'update') {
      _content = this.getReadContent();
      _article = <UpdateContent data={_content} onSubmit={function(_id, _title, _desc){
        var _contents = Array.from(this.state.contents);
        var i = 0;
        while(i < _contents.length){
          if(_contents[i].id === _id){
            _contents[i] = {id:_id, title:_title, desc:_desc};
            break;
          }
          i = i + 1;
        }

        this.setState({
          contents: _contents,
          mode:'read'
        });
      }.bind(this)}></UpdateContent>;
}

2) UpdateContent.js

import React, { Component } from 'react';

class UpdateContent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id:this.props.data.id,
            title:this.props.data.title,
            desc:this.props.data.desc
        }
        this.inputFormHandler = this.inputFormHandler.bind(this);
    }

    inputFormHandler(e) {
        this.setState({[e.target.name]:e.target.value}) // ⭐ [e.target.name] : target의 name값 들어옴
    }

    render() {
        console.log(this.props.data);
        return (
            <article>
                <h2>Update</h2>
                <form action='/create_process' method='post' onSubmit={function(e){
                    e.preventDefault(); 
                    this.props.onSubmit(
                        this.state.id,
                        this.state.title,
                        this.state.desc,
                    );
                }.bind(this)}> 
                    <input type='hidden' name='id' value={this.state.id}></input>
                    <p>
                        <input 
                            type='text' 
                            name='title' 
                            placeholder='title' 
                            value={this.state.title} 
                            onChange={this.inputFormHandler}>
                        </input>
                    </p>
                    <p>
                        <textarea 
                            name='desc' 
                            placeholder='description' 
                            value={this.state.desc}
                            onChange={this.inputFormHandler}>
                        </textarea>
                    </p>
                    <p><input type='submit'></input></p>
                </form>
            </article>
        );
    }
}

export default UpdateContent;

❤Delete

App.js

<Control onChangeMode={function(_mode){
            if(_mode === 'delete'){
              if(window.confirm('really?')){
                var _contents = Array.from(this.state.contents);
                var i = 0;
                while(i < _contents.length){
                  if(_contents[i].id === this.state.selected_content_id){
                    _contents.splice(i,1);
                    break;
                  }
                  i = i + 1;
                }
                this.setState({
                  mode:'welcome',
                  contents:_contents
                });
                alert('deleted!!')
              }
            }else {
              this.setState({
                mode:_mode
              })
            }
}.bind(this)}></Control>

---

최종 마무리(전체 소스 코드)

• github에 업로드

  https://github.com/wldus1208/react-basic