同一页面上的多个对话框

Question

我打算使用 @material-ui/core 制作两个不同的对话框模式。

我的文件结构如下：

|-components/
|-|-index.js
|-|-common/
|-|-|-header.jsx
|-|-|-searchModal.jsx
|-|-|-signModal.jsx

我正在尝试将这两个不同的模式导入 header.jsx 以使用 header.jsx 上的 React 按钮打开这些模式。我已经可以使用 index.js

直接从 header.jsx 导入它们

我需要两种不同类型的对话框，一种用于 searchModal，另一种用于 signModal (sign-in/up)。

由于我是 ReactJS 的初学者，我不知道如何导入它们并从远程文件正确引用它们的常量，远程文件通过按钮调用它们。我试着做一些类似于 this article here and also this one 的东西。但是即使我尝试从那里复制和调整代码，它也没有完全起作用，因为整个代码没有共享，而且项目结构与我的大不相同。

目前，我正在尝试这样实现它：

index.js

// common sources
export {default as Header} from "./common/header.jsx";
export {default as SearchModal} from "./common/searchModal.jsx";
export {default as SignModal} from "./common/signModal.jsx";

header.jsx

import React, {useState} from "react";
import Button from "@material/react-button";

import {SearchModal, SignModal} from "../";

const Header = (props) => {

    const [searchOpen, setSearchOpen] = useState(false);
    const [signOpen, setSignOpen] = useState(false);

    const handleSearchOpen = () => {
        setSearchOpen(true);
    };

    const handleSignOpen = () => {
        setSignOpen(true);
    };

    const handleClose = () => {
        setSearchOpen(false);
        setSignOpen(false);
    };

    return(
        <div>
            <Button raised onClick={props.handleSearchOpen}>
                Search
            </Button>
            <SearchModal open={searchOpen} handleClose={() => setSearchOpen(false)}/>
            <Button raised onClick={props.handleSignOpen}>
                Sign in - up
            </Button>
            <SignModal open={signOpen} handleClose={() => setSignOpen(false)}/>
        </div>
    );

signModal.jsx

import React from "react";
import Button from "@material/react-button";

import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import TextField from "@material-ui/core/TextField";

const SignModal = (props) => {
    return(
        <Dialog
            open={props.signOpen}
            onClose={props.handleClose}
            aria-labelledby="signModalTitle"
            aria-describedby="signModalDescription"
        >
            <DialogTitle id="dialog">{"title"}</DialogTitle>
            <DialogContent>
            <DialogContentText id="signModalDescription">
                modal description
            </DialogContentText>
            <TextField
            required
            id="signEmail"
            label="Username or email"
            placeholder="Required"
            variant="outlined"
            data-owner="signModal"
            autoFocus
            />
            <TextField
            required
            id="signPassword"
            label="Password"
            type="password"
            autoComplete="current-password"
            placeholder="Required"
            variant="outlined"
            data-owner="signModal"
            />
            </DialogContent>
            <DialogActions>
            <Button raised onClick={props.handleClose}>
                Continue
            </Button>
            </DialogActions>
        </Dialog>
    );
}

export default SignModal

searchModal.jsx与signModal.jsx基本相同，只是项目和设计不同。

我不确定我哪里错了，欢迎任何建议。

Answer 1

我自己找到了解决方案。

这是我需要在 header.jsx

上更改的内容

<div>
    <Button raised onClick={handleSearchOpen}>
        Search
    </Button>
    <SearchModal searchOpen={searchOpen} handleClose={() => handleClose()}/>
    <Button raised onClick={handleSignOpen}>
        Sign
    </Button>
    <SignModal signOpen={signOpen} handleClose={() => handleClose()}/>
</div>

需要将 open 参数更改为任一模式上的 props，即 searchOpen 和 signOpen。现在可以了。

同一页面上的多个对话框

Multiple Dialogs on the same page

reactjs

material-ui

react-modal