[TIL]React初級:CRUD-Deleteの実装



12.Delete実装

  • App.jsの機能は、Controlの中のdeleteコンポーネント部分において実装され得る.
  • deleteモードと非モードの区別コードに変更
    <Control onChangeMode={function(_mode) {
            if(_mode === 'delete') {
                
            } else {
                this.setState({
                    mode: _mode
                });
            }
        }.bind(this)}></Control>
  • deleteモードで、confirmウィンドウが開き、ユーザーは「OK」をクリックして削除し、「キャンセル」をクリックして削除します.
    <Control onChangeMode={function(_mode) {
            if(_mode === 'delete') {
                // confirm은 앞에 window를 붙여줘야 실행된다
                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) {
                            // splice()로 어디에서 어디까지 지울 것인지 결정
                        	_contents.splice(i,1);
                        	break;
                        }
                      	i = i + 1;
                    }
                    this.setState({
                      mode: 'welcome',
                      contents: _contents
                    });
                    alert('Deleted!');
                }
            } else {
                this.setState({
                    mode: _mode
                });
            }
        }.bind(this)}></Control>
    💡 splice():アレイを変更するときに使用する関数.()に入る因子は順に1であった.変更を開始するインデックス、2.削除する要素の数、3.配列に追加する3つの要素.戻り値は、削除された要素を含む配列です.