如何在javascript或react中使用z-index禁用输入？

我想禁用输入意味着用户无法在输入元素中输入内容

我想做什么

我有两个弹出窗口（一个显示信息，另一个带有输入元素、取消和提交按钮）。现在，这两个元素是从同一个div渲染的，该div的z索引高于应用程序中的所有其他元素。这意味着当这些对话框出现时，用户无法单击任何其他元素

现在的问题是，我不希望用户在我上面提到的对话中的输入元素中输入任何内容

有没有一种方法可以让我用z-index来做呢？我不想在输入中添加一些禁用的属性，因为它可能会在某个地方破坏代码

下面是html代码

#根{
位置：固定；
z指数：25；
}
.input_对话框{
柔性生长：1；
}
.info\u对话框{
宽度：300px；
}

一些信息
取消
提交

使用css您可以使用

指针事件：无

#根{
位置：固定；
z指数：25；
}
.input_对话框{
柔性生长：1；
}
.info\u对话框{
宽度：300px；
}

一些信息
取消
提交

我不想在输入中添加一些禁用的属性，因为它可能会在某个地方破坏代码。这使得这成为一个X/Y问题，您可以添加显示：无；如果您不想用户向其写入任何内容，则输入。或者用{enableInput&&}删除它。但我不明白为什么禁用输入会破坏任何东西。我认为负z索引可能与将不透明度设置为0@Michael将不透明度添加到0时，它将不可见。我认为问题是指显示输入字段，但使用css如何禁用字段OK，这一点并不清楚，尽管非常奇怪，因为禁用是一个本机html属性，这将是一种解决方法。但是使用键盘选项卡，您可以集中输入和键入。