React + Material-UI로 확인 다이얼로그를 작성해 보았다.

React 괄호 좋은 대화 만들기

코드 해설

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

구성 요소 배치

        <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