reactjs - 反应键盘景观
问题描述
我的反应有问题。我有一个带有一些表单和输入字段的网络应用程序。当我在纵向模式下单击并使用 PC、智能手机或平板电脑的键盘输入字段时,一切正常,但是当我更改设备的方向并单击一个字段时,键盘会出现,但它会覆盖所有视图。我怎么解决这个问题?
我的搜索组件表单示例:
<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>
CSS:
.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%;
}
解决方案
推荐阅读
- c++ - 将 bazel 设置为环境变量 windows
- r - R Markdown:我的情节图正在被裁剪
- json - dotnet publish 不使用 appsettings.json
- reactjs - 如果条件为真,则在子组件中调用函数
- javascript - 你能在一个函数中拦截并创建一个 AxiosPromise 吗?
- java - 根据原始图像分辨率将图像大小调整为字节大小以下的算法
- java - android.widget.FrameLayout 无法转换为 androidx.appcompat.widget.Toolbar 错误
- php - 在 PHP 中,我可以为类属性设置别名吗?例如通过 Trait 允许 ArrayAccess 方法
- javascript - 在Javascript中将对象转换为数组
- microsoft-graph-api - 使用“@azure/msal-angularjs”:“^0.1.1”将 Graph API 工具包避免登录组件与通过 Azure AD 进行身份验证的现有应用程序集成