React/Material-ui：打开移动键盘时不更改对话框

Question

我有一个对话框，其中包含一些用户可以提供输入的文本字段，如下所示。

我遇到的问题是，每当用户点击其中一个文本字段时，移动键盘就会把一切搞砸。它看起来像这样：

我想让对话框保持不变 - 就像在，它不应该缩小并强制用户向下滚动以查看完整的对话框。我尝试使用 FullscreenDialog 组件，但问题仍然存在 - 移动键盘只是将其缩小并由于某种原因使其可滚动。有没有什么办法解决这一问题？

编辑我找到了一种方法来解决这个问题，至少是暂时的 - 在对话框中的 bodyStyle 添加一个 minHeight 并且键盘不会覆盖它。显然，您必须向上移动对话框，以便键盘在出现时不会阻止它:)

Answer 1

我遇到过类似的问题，但解决方案可能并不适用于所有情况。

在我的例子中，主要<Paper />组件的高度设置为大约window.innerHeight，其中的另一个<Paper />组件设置为大约window.innerHeight * 0.6。我使用这个而不是简单的 CSS 单元“vh”，因为它补偿了 URL 栏。

在嵌套论文中，我遇到了<TextField /> 与您描述的相同的问题。解决方案基本上是监听 onresize 事件，因为它在键盘打开时触发，然后您只需使用所有这些措施的 maxheight 即可。

为了使其完美，您可能需要尊重设备旋转，因为它确实需要您使用新的高度，当然还要确保组件放置正确。