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

【问题标题】：React Hide Component when Mobile Keyboard open移动键盘打开时反应隐藏组件
【发布时间】：2020-08-03 23:08:50
【问题描述】：

我想知道是否有办法在移动设备（Andriod、iOS 等）键盘在屏幕上打开时隐藏 React 组件（例如底部导航栏组件）。

目前我正在使用：

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

但我想知道是否有 JS 事件或类似事件。

【问题讨论】：

【解决方案1】：

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

this.state = {
    isNavVisible: true
}

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

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

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

【讨论】：