Reactjs React Keyboard景观

我的反应有问题。 我有一个web应用程序，其中包含一些表单和输入字段。 当我在个人电脑、智能手机或平板电脑的纵向模式下通过键盘单击并使用输入字段时，一切正常，但当我更改设备的方向并单击一个字段时，键盘出现，但它覆盖了所有视图。 我怎样才能解决这个问题

我的搜索组件表单示例：

 <div className="vv-search-form-layout">
  <div className="d-flex flex-row search-form">
    <input
      type='text'
      name="search"
      value={searchValue}
      className="form-control search-text"
      onChange={changeSearch}
      onKeyPress={onKeyPress}
      ref={this.searchInput}
     />
   </div>
  </div>

---

如果没有一个最小的、可复制的示例，调试非常困难；-）你说得对吗，我已经添加了搜索组件表单的代码

.vv-search-form-layout {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
 
  @media (min-width: $md) {
    margin-bottom: 0;
  }
}

.search-form {
  text-align: center;
  justify-content: center;
  align-items: center;
  max-width: 35rem;
  width: 100%;
}