get feedback from the Dialog in Fluent UI React

Question

Having the doc sample here, how should we understand what button was pressed?

return (
    <>
      <Toggle label="Is draggable" onChange={toggleIsDraggable} checked={isDraggable} />
      <DefaultButton secondaryText="Opens the Sample Dialog" onClick={toggleHideDialog} text="Open Dialog" />
      <Dialog
        hidden={hideDialog}
        onDismiss={toggleHideDialog}
        dialogContentProps={dialogContentProps}
        modalProps={modalProps}
      >
        <DialogFooter>
          <PrimaryButton onClick={toggleHideDialog} text="Send" />
          <DefaultButton onClick={toggleHideDialog} text="Don't send" />
        </DialogFooter>
      </Dialog>
    </>
  );

Is there a way to use a function when "send" is pressed (say alert "sent") and hide the form, and if "cancel" button is pressed, to alert "canceled" (and finally also hide the form)

Answer 1

Simply define a function and pass a callback to the onClick like the following:

function handleButtonClick(event) {
    console.log(event.target)
    toggleHideDialog()
}

<PrimaryButton onClick={(event) => handleButtonClick(event)} text="Send" />
<DefaultButton onClick={(event) => handleButtonClick(event)} text="Don't send" />

Then you can drill down the event object in handleButtonClick to see which button was clicked among other details about the click event.