Zenn
Open1

【React Next】三項演算子で分岐させたボタンの挙動について

Next.js
React
TypeScript
yu.miyoshiyu.miyoshi

概要

ある編集画面にて、ボタンを変数(isUpdateable)の状態(true, false)で管理した際に、両方のボタンが反応する挙動をしたためまとめておく

内容詳細

React(Next, TypeScript)のJSX内において、以下のようにisUpdateableで状態を管理しているボタンがある

test before
{isUpdateable ?
  <Grid>
    <Grid item md={12}>
      <Button
        onClick={handleCancel}
        variant="contained"
        color="primary">
        キャンセル
      </Button>
    </Grid>
  </Grid>
  :
  <Grid>
    <Grid>
      <Button type="submit" variant="contained" color="primary">
        保存
    </Button>
    </Grid>
  </Grid>
}

三項演算子で管理かつ、キャンセルボタンをクリックした時にhandleCancelでbool値を変更する処理を記述してある
キャンセルボタンを押すと、即座に「保存」ボタンに置き換わるが、同時にsubmitの操作もされてしまった。

bool値の変更後、「保存」ボタンもクリックされた判定になってしまうことが原因のよう

対応策

以下のように、複数の記述にわけることで回避することができた

test after
{isUpdateable &&
  <Grid>
    <Grid item md={12}>
      <Button type="submit" variant="contained" color="primary">
        保存する
    </Button>
    </Grid>
  </Grid>
}
{!isUpdateable === false &&
  <Grid item md={12}>
    <Button onClick={() => router.back()} variant="contained" color="primary">
      キャンセル
    </Button>
  </Grid>
}

参考サイト