同一页面上的多个对话框答案

【问题标题】：Multiple Dialogs on the same page同一页面上的多个对话框
【发布时间】：2021-09-04 16:59:33
【问题描述】：

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

我的文件结构如下：

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

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

我需要两种不同类型的对话框，一种用于searchModal，另一种用于signModal（登录/注册）。

由于我是 ReactJS 的初学者，我不知道如何导入它们并从远程文件中正确引用它们的 const，远程文件通过按钮调用它们。我尝试制作类似于this article here 和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基本相同，只是物品和设计不同。

我不确定我错在哪里，感谢任何建议。

【问题讨论】：

标签： reactjs material-ui react-modal

【解决方案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。现在可以了。

【讨论】：