React - 提交表单后弹出窗口关闭

Question

我的代码出现一些问题，我不知道如何修复它。 访问“allVendors.jsx”后，我按下添加按钮，然后弹出窗口打开。然后我按下提交按钮，我想返回 allVendors.jsx，所以我想关闭弹出窗口。我怎样才能实现它？

allVendors.jsx

import React, { useState, useEffect } from 'react'
import { DataGrid } from '@mui/x-data-grid'
import AddCircleIcon from '@mui/icons-material/AddCircle';
import { Button } from '@mui/material';
import '../Vendors/allVendors.scss';
import Popup from '../../components/popup/Popup';
import Vendor from './newVendor';

const columns = [
  { field: 'name', headerName: 'Name', width: 400 },
  { field: 'zip', headerName: 'ZIP', width: 100 },
  { field: 'state', headerName: 'State', width: 300 },
  { field: 'city', headerName: 'City', width: 300 },
  { field: 'ID', headerName: 'ID', width: 100  }
]

const MyDataGrid = () => {

  const [tableData, setTableData] = useState([])

  useEffect(() => {
    fetch("http://localhost:1010/vendors/allVendors")
      .then((data) => data.json())
      .then((data) => setTableData(data))

  }, [])

  const [openPopup, setOpenPopup] = useState(false)


  return (
    <div style={{ height: 700, width: '80%' }}>
      <DataGrid
        rows={tableData}
        columns={columns}
        pageSize={12}
      >
      </DataGrid>
      <Button className='addButton' variant="contained" size='small' onClick={() => setOpenPopup(true)} endIcon={<AddCircleIcon />}>
        Add new
      </Button>
      <Popup
      title = "Add new vendor"
      openPopup = {openPopup}
      setOpenPopup = {setOpenPopup}
      >
        <Vendor />
      </Popup>
    </div>
  )
}

export default MyDataGrid

newVendor.js

import React, {useState} from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import './newVendor.scss'
import { Container, Paper, Button } from '@mui/material';

export default function Vendor() {
    const paperStyle={ width: '100%', margin: "auto"}
    const [name, setName]=useState('')
    const [zip, setZip]=useState('')
    const [state, setState]=useState('')
    const [city, setCity]=useState('')

    const handleClick=(e)=>{
        e.preventDefault()
        const newVendor={name, zip, state, city}
        console.log(newVendor)
        fetch("http://localhost:1010/vendors/add", {
            method: "POST",
            headers:{"Content-Type":"application/json"},
            body:JSON.stringify(newVendor)
    }).then(()=>{
        console.log("New vendor added");
    })
    }

  return (
    <Container className='formContainer'>
        <Paper elevation={1} style={paperStyle}>
            <form className='vendorForm' noValidate autoComplete="off">
                <Box
                component="form"
                sx={{
                    '& .MuiTextField-root': { m: 2 },
                }}
                noValidate
                autoComplete="off"
                >
                    <div>
                        <TextField
                        required
                        id="outlined-required"
                        label="Name"
                        value={name}
                        onChange={(e)=>setName(e.target.value)}
                        />
                        <TextField
                        id="outlined-required"
                        label="ZIP"
                        value={zip}
                        onChange={(e)=>setZip(e.target.value)}
                        />
                        <TextField
                        id="outlined-required"
                        label="State"
                        value={state}
                        onChange={(e)=>setState(e.target.value)}
                        />
                        <TextField
                        id="outlined-required"
                        label="City"
                        value={city}
                        onChange={(e)=>setCity(e.target.value)}
                        />                                
                    </div>
                </Box>
                <Button variant="contained" onClick={handleClick}>Submit</Button>
            </form>
        </Paper>
    </Container>
    
  );
}

Popup.js

import React from 'react' import { Dialog, DialogTitle, DialogContent } from '@mui/material'; import CloseIcon from '@mui/icons-material/Close'; import { IconButton } from '@mui/material'; import './popup.scss'

export default function Popup(props) {

const { title, children, openPopup, setOpenPopup} = props;

return (
    <Dialog open={openPopup} maxWidth="sm">
        <DialogTitle>
            <div style={{ display: "flex" }}>
            {title}
            <IconButton style={{ marginLeft: "auto" }} variant="contained" color='error' size='small' onClick={()=>{setOpenPopup(false)}}><CloseIcon/></IconButton>
            </div>
        </DialogTitle>
        <DialogContent dividers>
            {children}
        </DialogContent>
    </Dialog>
)
}

我尝试在 newVendor.js 中创建 setOpenPopup const 但不起作用。

Answer 1

1) 在使用 Vendor 组件的 MyDataGrid.js 组件中，确保将 setOpenPopup 作为 prop 传递：

2）在您的 Vendor.js 组件中，接收 setOpenPopup 作为道具，您应该能够在表单提交后成功关闭弹出窗口。