0

我正在处理 Reactjs 项目，我想打开一个对话框，它是购物车页面的全局组件。这是我单击购物车删除按钮时的购物车页面，然后显示对话框当前为空。

/**
 * Cart Page
 */
import React, { Fragment } from 'react';
import { Button,Box} from '@material-ui/core';
import { ConfirmationDialog } from 'components/GlobalComponents';
import IntlMessages from 'util/IntlMessages';

function Cart(props){
    const [anchorEl,setAnchorEl] = React.useState(null);
    const [item,setItem] = React.useState('');
    const dialog = React.useRef(null);

    const onDeleteCartItem = (item) => {
        // setItem(item);
        console.log(dialog);
        // dialog.current.open();
    }

    const deleteCartItem = (popupResponse) => {
        console.log(popupResponse);
   }
   
    return (
        <div className="cart-page white-btn-color">
            <Button
                className="cart-delete"
                onClick={() => onDeleteCartItem(cart)}
            >
                <Box component="span" className="material-icons-outlined">delete</Box>
            </Button>                       
            <ConfirmationDialog
                ref={dialog}
                onConfirm={(res) => deleteCartItem(res)}
            />                          
        </div>
    )
}

export default Cart;

确认对话框：

import React from 'react';
import { Dialog, DialogContent, DialogActions, Button, Box, Typography } from '@material-ui/core';

function ConfirmationDialog(props) {
   const [open,setOpen] = React.useState(false);
   


   //Define function for open confirmation dialog box
   const openDialog = () => {
      setOpen(true);
   };

   //Define function for close confirmation dialog box and callback for delete item 
   const closeDialog = (isTrue) => {
      setOpen(false);
      props.onConfirm(isTrue)
   };
   console.log(props);
   return (
      <Dialog
         open={open}
         ref={props.ref}
         onClose={()=>closeDialog()}
         aria-labelledby="responsive-dialog-title"
      >
         <DialogContent>
                <Box textAlign="center" pt={2}>
                    <Typography variant="h5">
                        Are you sure you want to delete this product ?
                    </Typography>
                </Box>
         </DialogContent>
      </Dialog >
   );
}

export { ConfirmationDialog };

我正在尝试使用上述代码，但它不起作用，请告诉我我错在哪里。谢谢

4

1 回答 1

1

有几件事出了问题。首先，refprop 具有特殊含义，除非您使用React.forwardRef().

然后，根据文档，您不应该使用 ref 作为公开 API 的手段，可以这么说。

我首选的方法是在组件树中向上定义对话方式，并通过上下文公开打开/关闭功能。您可以使用本地上下文对象使用这些方法，useContext()甚至创建自己的方法，这些方法在useDialog()内部调用useContext()（在声明对话框的文件中），因此您不必导出上下文对象。

于 2020-07-01T04:44:55.363 回答