🐘 【React】TODOアプリのStateの操作等覚え書き
作成日: 2021/07/17
0

最低限の操作だけ記載
ポイントはStateの操作はsetStateでのみ行うこと
配列のStateはスプレッド構文で変数に代入→代入した変数(配列)を操作→setStateでStateに反映

  1. TODOを入力
    インプットボックスの中身をStateとして保持(inputState)
    インプットボックスの中身が変わたびにStateを更新する

  2. TODOを追加
    未完了のTODOの配列をStateとして保持(incompleteTodo)
    追加ボタンをクリックすると
    ・incompleteTodoとinputStateを合わせた変数を宣言
    ・代入した変数を引数にとってStateを更新

  3. TODOを削除
    削除ボタンをクリックすると
    ・incompleteTodoを変数に代入
    ・上記配列のindex番目の要素を削除する
    ・削除後の配列を引数にとってStateを更新

  4. TODOを完了
    完了のTODOの配列をStateとして保持(completeTodo)
    完了ボタンをクリックすると
    ・incompleteTodoを変数に代入
    ・上記変数のindex番目の要素を削除する
    ・削除後の配列を引数にとって未完了のTODOのStateを更新
    ・incompleteTodoのindex番目の要素とcompleteTodoを合わせた変数を宣言
    ・上記変数を引数にとって完了のTODOのStateを更新

  5. 完了したTODOを戻す
    戻すボタンをクリックすると
    ・completeTodoを変数に代入
    ・上記変数のindex番目の要素を削除する
    ・削除後の配列を引数にとって完了のTODOのStateを更新
    ・completeTodoのindex番目の要素とincompleteTodoを合わせた変数を宣言
    ・上記変数を引数にとって未完了のTODOのStateを更新

2021年1月からプログラミングの勉強開始。 主にJavaScript, Rubyについてメモ を残していきたい。