React + Material-UIで確認ダイアログを作成してみた。

Reactのカッコ良いダイアログを作る

最近、ようやくReactを本格的に初めまして、
入力ダイアログからの確認ダイアログというのが思いのほか綺麗にできたので
これはダイアログ史に刻もうと思い、Github博物館に寄贈してきました。

■React & Material-UI CommonDialog

デモも貼らずに記事立てとな、とおじゃられるとアレなので
ちゃんと用意してきましたよ。
■DEMO

こちらCodeSandboxさんを使用させていただきました。
■CodeSandbox

コード解説

コンポーネント<CommonDialog ... />

import React, {useEffect} from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';

const CommonDialog: React.FunctionComponent<
    { msg: any, isOpen: any, doYes: any, doNo: any }
    > = ({msg, isOpen, doYes, doNo}) => {

  const [open, setOpen] = React.useState(false)

  useEffect(() => {
    setOpen(isOpen)
  }, [isOpen])

  return (
      <div>
        <Dialog
            open={open}
            keepMounted
            onClose={() => doNo()}
            aria-labelledby="common-dialog-title"
            aria-describedby="common-dialog-description"
        >
          <DialogContent>
            {msg}
          </DialogContent>
          <DialogActions>
            <Button onClick={() => doNo()} color="primary">
              No
            </Button>
            <Button onClick={() => doYes()} color="primary">
              Yes
            </Button>
          </DialogActions>
        </Dialog>
      </div>
  )
}
export default CommonDialog

コンポーネント配置

• msg ... メッセージ
• isOpen ... 呼出し元の制御ステート
• doYes ... 「確認Yes」での実行処理
• doNo ... 「確認No」でのクローズ処理

        <CommonDialog
            msg={"Message"}
            isOpen={commDlg}
            doYes={execute}
            doNo={() => {setCommDlg(false)}}
        />

用法

const FormDialog = () => {

  const [commDlg, setCommDlg] = React.useState(false)
  ...
  const execute = () => {
  }

  return (
    ...
        <CommonDialog
            msg={"登録しますか？"}
            isOpen={commDlg}
            doYes={execute}
            doNo={() => {setCommDlg(false)}}
        />
    ...
  )
}
export default FormDialog

あるコンポーネントに振舞と状態を持たせて、その組合せでビューを構成する
このReactの思想はしっくり来るものがあります。