[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つの要素.戻り値は、削除された要素を含む配列です.Reference
この問題について([TIL]React初級:CRUD-Deleteの実装), 我々は、より多くの情報をここで見つけました https://velog.io/@minami/TIL-React-초급-CRUD-Delete-구현하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol