JavaScriptで編集中の入力情報を初期化(Reset・init)するキャンセル処理の実装方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptで編集中の入力情報を初期化(Reset)するキャンセル処理の実装方法について解説していきます。

1 編集中の入力情報を初期化(Reset)するキャンセル処理の実装方法
- 1.1 要件定義
- 1.2 編集中の入力情報を初期化(Reset)するキャンセル処理の実装方法
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

編集中の入力情報を初期化(Reset)するキャンセル処理の実装方法

編集中の入力情報を初期化(Reset)するキャンセル処理の実装方法の要件定義と、SampleCodeは、次のとおりです。

要件定義

想定しているのは、ON/OFF 型(true / false )の設定データをTable上に設定されている想定。
キャンセルボタンによる、Edit(編集)状態からの、初期化(Reset)が必要。

編集中の入力情報を初期化(Reset)するキャンセル処理の実装方法


// [ Edit中のDataSet ]
// Edit中のカテゴリーテーブル
const editCategoryTable = {
  id: 1,
  category_name: 'ロボ玉開発ユーザー',
  rows: [
    { topic: 'ロボ玉_TALK', view: true, post: false, comment: false },
    { topic: 'ロボ玉_REPORT', view: true, post: false, comment: false },
    { topic: 'ロボ玉_STORY', view: true, post: false, comment: false },
  ],
};

// [ 初期化するためのDataSet ]
// 初期状態のカテゴリーテーブルの Rows設定
const initEditRowConfig = {
  view:[
    {index: 0, selectted: true},
    {index: 1, selectted: true},
    {index: 2, selectted: true},
  ],
  post:[
    {index: 0, selectted: true},
    {index: 1, selectted: true},
    {index: 2, selectted: true},
  ],
  comment:[
    {index: 0, selectted: true},
    {index: 1, selectted: true},
    {index: 2, selectted: true},
  ],
};

// [ JavaScriptで、編集中の入力情報を初期化(Reset)するキャンセル・アルゴリズム ]

// 1. まずは、StateをCopyする
const copyCategoryTable = {...editCategoryTable};

// 2. Edit中のカテゴリーテーブル(editCategoryTable) の状態を 初期状態(initEditRowConfig)に、戻します。
copyCategoryTable.rows.forEach((row, index) => {
  row.view = initEditRowConfig.view[index].selectted;
  row.post = initEditRowConfig.post[index].selectted;
  row.comment = initEditRowConfig.comment[index].selectted;
});

console.log('copyCategoryTable', copyCategoryTable);