Sweetalert 2 中的输入无法在材料 UI 模态反应 js 中键入

编程问答 2022-05-25

问题描述

我有一张卡片来显示订单，取消时卡片内会打开sweetalert2 弹出窗口，询问取消原因。这在订单屏幕上工作得很好。

enter image description here

<Grid item md={8} sm={12}>
    orders.map((order) => <supplierOrderBlock data={order} />)
</Grid>

并且在取消时这些swal 火。第一个要求用户输入原因，如果用户没有输入原因，第二个提示提示用户输入原因以取消。

const cancelOrder = (orderID,status) => {
    Swal.fire({
      title: "Are You Sure You Want to Cancel Order",text: "Please Enter the reason for the cancellation of order",input: "text",showCancelButton: true,confirmButtonColor: "#1c8fec",cancelButtonColor: "#fa013b",customClass: 'swal-wide'
    }).then((result) => {
      if (result.value == '') {
        swal({
          title: "You can not cancel without giving a reason",buttons: {
            Confirm: { text: "Okay",className: "okayButton" },},});
      }
else if (result.isConfirmed) { //cancel order}

这工作得很好。

现在，当我尝试在我的仪表板上的 Material UI 模式中使用相同的组件时，它不允许我输入文本。

<Modal
        open={modal}
        onClose={handleClose}
        aria-labelledby="simple-modal-title"
        aria-describedby="simple-modal-description"
        style={{ width: "60%",zIndex: 1,marginLeft: '-10%' }}
      >
        <Box style={{ marginLeft: "50%",marginTop: "25vh",width: "100%",position: 'absolute' }}>
          <supplierOrderBlock data={supplierorder} />
        </Box>
      </Modal>

enter image description here

如果我从 Modal 中删除 Z-index 属性，那么 swal 会落后于 modal

enter image description here

但是在关闭模态时，它让我们输入原因

enter image description here

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

material-uireactjsreactjsreactjsreactjssweetalertsweetalert2