import React, { Component } from 'react'
import { InputItem } from 'antd-mobile'
export default class InputKeyboard extends Component {
state = {
clientHeight: 0
}
componentDidMount() {
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight
this.setState({ clientHeight })
window.addEventListener('resize', this.resize)
}
componentWillUnmount() {
window.removeEventListener('resize', this.resize) // 移除监听
}
resize = () => {
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight
if (this.state.clientHeight > clientHeight) { // 键盘弹出
this.inputClickHandle()
} else { // 键盘收起
this.inputBlurHandle()
}
}
inputClickHandle = () => {
// 这里处理键盘弹出的事件
}
inputBlurHandle = () => {
// 这里处理键盘收起的事件
}
render() {
return (
<InputItem
className='input'
placeholder="关键字"
onClick={this.inputClickHandle}
onBlur={this.inputBlurHandle}
/>
)
}
}
react 获取键盘的弹出和收起
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- (因为不会使用markdown编辑器,所以将长期使用富文本做笔记) 正文: 在使用该监听功能之前,首先要写一个支持...
- 监听当键盘将要出现时 OC版 监听当键将要退出时 swift版 OC版 当键盘出现 当键退出 swift版 键盘弹...
- 当你安装archlinux的时候会遇到这种问题,首先你需要确保你是使用了arch官网推荐的软件写的启动盘,例如ru...