移动键盘打开时反应隐藏组件

Question

我想知道是否有一种方法可以在屏幕上打开移动键盘（Andriod，iOS等）的同时隐藏React组件（例如底部导航栏组件）。

目前我正在使用：

@media (max-height: 400px) {
    .navclass {
        display: none;
    }
}

但想知道是否存在JS事件或类似事件。

Answer 1

当输入元素集中在内置键盘的设备上时，键盘会弹出。
ReactJS允许您在代码中编写普通JavaScript。因此，您可以做的是

this.state = {
    isNavVisible: true
}

您现在可以将其作为道具动态传递给组件，并将其设置为wrappers元素的样式，作为组件主文件中的内联样式。

然后您可以在您关注的输入或元素上编写一个函数：

const disableNav = () => {
    if(windows.innerWidth <= 400){
          this.setState({isNavVisible: false})
    }
}