从 Header parent 组件打开 Material-UI 对话框模式

Question

我有一个 header 组件与注册对话框模式组件分开。所以就像一个 parent 一个 child 组件。我想从 headerlink 组件 (parent)

调用注册对话框 (child)

这是我的 headerlink 组件：

...
import Register from "../Register";
....

export default function HeaderLinks(props) {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);
  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };

  return (
    <List className={classes.list}>
      <ListItem className={classes.listItem}>
        <Button
          color="transparent"
          className={classes.navLink}
          onClick={handleClickOpen}
        >
          Register
        </Button>
      </ListItem>
      <ListItem className={classes.listItem}>
        <Button
          color="transparent"
          className={classes.navLink}
          
        >
          Log In
        </Button>
      </ListItem>
    </List>
  );
  <Register open={handleClickOpen} onClose={handleClose} />;
}

注册对话框组件只是从 Material-UI 的文档中复制并删除了按钮。

export default function Register() {
  const [open, setOpen] = React.useState(false);

  const classes = useStyles();
  const theme = useTheme();

  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Dialog
        onClose={handleClose}
        aria-labelledby="customized-dialog-title"
        open={open}
      >
        <DialogTitle id="customized-dialog-title" onClose={handleClose}>
          Register
        </DialogTitle>
        <DialogContent dividers>
         ...content...
        </DialogContent>
      </Dialog>
    </div>
  );
}

当我单击 headerLink 上的“注册”按钮时，没有任何反应。不确定我还遗漏了什么，因为没有错误。

Answer 1

在您的 HeaderLinks 上，您已经 return 在该函数上输入了一个值，因此下面的其余源代码将不会执行。

return (
  <List className={classes.list}>
    ...
  </List>
);
<Register open={handleClickOpen} onClose={handleClose} />; // <-- code will not be reached

所以只需将它移到 return 语句中并将它们关闭在单个标签上，因为相邻的 JSX 元素必须包含在封闭标签中。将道具传递给 Register，它不需要内部状态，因为它的 open 道具（根据您的设计看来）是由 HeaderLinks 组件

控制的

export default function HeaderLinks() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);    
  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };

  return (
    <>
      <List className={classes.list}>
        <ListItem className={classes.listItem}>
          <Button
            color="transparent"
            className={classes.navLink}
            onClick={handleClickOpen}
          >
            Register
          </Button>
        </ListItem>
        <ListItem className={classes.listItem}>
          <Button color="transparent" className={classes.navLink}>
            Log In
          </Button>
        </ListItem>
      </List>
      <Register open={open} handleClose={handleClose} />
    </>
  );
}

function Register({ open, handleClose }) {
  const classes = useStyles();
  const theme = useTheme();

  return (
    <div>
      <Dialog
        onClose={handleClose}
        aria-labelledby="customized-dialog-title"
        open={open}
      >
        <DialogTitle id="customized-dialog-title" onClose={handleClose}>
          Register
        </DialogTitle>
        <DialogContent dividers>...content...</DialogContent>
      </Dialog>
    </div>
  );
}

从 Header parent 组件打开 Material-UI 对话框模式

Opening a Material-UI dialog modal from a Header parent component

javascript

components

modal-dialog

reactjs

material-ui