I have this file and I'm trying to have a "group batten", and when I click on it, I have a list with ["Confirm Review", "Reject Invoice", "Assign to User"] and I want when I press "Confirm Review" to show me a Dialog, how can I solve this problem?

And this is a file that contains the part of groupButton

import React from "react";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import ButtonGroup from "@material-ui/core/ButtonGroup";
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import Grow from "@material-ui/core/Grow";
import Paper from "@material-ui/core/Paper";
import Popper from "@material-ui/core/Popper";
import MenuItem from "@material-ui/core/MenuItem";
import MenuList from "@material-ui/core/MenuList";

const options = ["Confirm Review", "Reject Invoice", "Assign to User"];

export default function SplitButton() {
  const [open, setOpen] = React.useState(false);
  const anchorRef = React.useRef(null);
  const [selectedIndex, setSelectedIndex] = React.useState(1);

  const handleClick = () => {
    console.info(`You clicked ${options[selectedIndex]}`);
  };

  const handleMenuItemClick = (event, index) => {
    setSelectedIndex(index);
    setOpen(false);
  };

  const handleToggle = () => {
    setOpen((prevOpen) => !prevOpen);
  };

  const handleClose = (event) => {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return;
    }

    setOpen(false);
  };

  return (
    <Grid container direction="column" alignItems="center">
      <Grid item xs={12}>
        <ButtonGroup
          variant="contained"
          color="primary"
          ref={anchorRef}
          aria-label="split button"
        >
          <Button
            style={{
              paddingLeft: "2.4rem",
              paddinRight: "2.4rem",
              paddingTop: "1.5rem",
              paddingBottom: "1.5rem",
              // backgroundColor: "#d82c2c",
              // color: "#FFFFFF",
              borderRadius: 4,
            }}
            onClick={handleClick}
          >
            {options[selectedIndex] || "Action"}{" "}
          </Button>
          <Button
            color="primary"
            size="small"
            aria-controls={open ? "split-button-menu" : undefined}
            aria-expanded={open ? "true" : undefined}
            aria-label="select merge strategy"
            aria-haspopup="menu"
            onClick={handleToggle}
            style={{
              paddingTop: "1.5rem",
              paddingBottom: "1.5rem",
              // backgroundColor: "#d82c2c",
              // color: "#FFFFFF",
              borderRadius: 4,
            }}
          >
            <ArrowDropDownIcon />
          </Button>
        </ButtonGroup>
        <Popper
          open={open}
          anchorEl={anchorRef.current}
          role={undefined}
          transition
          disablePortal
        >
          {({ TransitionProps, placement }) => (
            <Grow
              {...TransitionProps}
              style={{
                transformOrigin:
                  placement === "bottom" ? "center top" : "center bottom",
              }}
            >
              <Paper>
                <ClickAwayListener onClickAway={handleClose}>
                  <MenuList id="split-button-menu">
                    {options.map((option, index) => (
                      <MenuItem
                        key={option}
                        disabled={index === 2}
                        selected={index === selectedIndex}
                        onClick={(event) => handleMenuItemClick(event, index)}
                      >
                        {option}
                      </MenuItem>
                    ))}
                  </MenuList>
                </ClickAwayListener>
              </Paper>
            </Grow>
          )}
        </Popper>
      </Grid>
    </Grid>
  );
}

CodePudding user response：

First, is that MUI v4?

Also, why use style prop when sx (v5) and makeStyle (v4) are a thing.

A high-level overview of what you want, minus all those decorative styles and props.

import { Fragment, useState } from "react";
import { ButtonGroup, Button, Dialog, DialogContent } from "@mui/material";

const ButtonGroupWithDialog = () => {
  const [dialogOpen, setDialogOpen] = useState(false);

  const handleDialogOpen = () => setDialogOpen(true);
  const handleDialogClose = () => setDialogOpen(false);

  return (
    <Fragment>
      <ButtonGroup>
        <Button onClick={handleDialogOpen}>Confirm Review</Button>
        <Button>Reject Invoice</Button>
        <Button>Assign to User</Button>
      </ButtonGroup>
      <Dialog open={dialogOpen} onClose={handleDialogClose}>
        <DialogContent>
          {/* content here */}
        </DialogContent>
      </Dialog>
    </Fragment>
  );
};