React WebApp键盘遮挡输入框?

写在前面：

由于近期工作实在太忙，正在赶项目，抽不出时间整理平时遇到的坑，隔了很长时候没有给大家更新文章了，这次正好利用这个单休的时间写一篇开发时遇到的坑。大家如果有什么好的建议和意见欢迎投递哦，邮箱：lcczmy@163.com

本人使用的输入框有两种来源，1.自定义input组件，2.阿里的antd-mobile组件库中的输入框组件。发现都存在输入框被键盘遮挡的问题。

原因分析：

这个问题经过排查发现：之所以输入框不能够被键盘顶上去，是因为页面的可滑动区域太小导致页面无法滑动。那你可能会问：我用同样的页面在不同浏览器打开，输入框获得焦点时为何能够将输入框顶上去呢？这个问题的原因还需进一步研究，那么就目前来说，使用react打出来的包确实存在该问题。这篇文章会尽量帮大家使用最简单的方案解决该问题。

解决方案：

上面已经提到了导致原因，问题是因为页面高度不够而导致页面无法滑动才使得输入框无法被顶上去。
讲到这里你可能已经知道怎么做了！
是的，增加页面的高度。我采用在页面底部添加空元素div的方式，增加页面高度。
试想一下，一个WebApp中用到输入框的地方可能非常多，如果每个页面都从新写一遍那岂不是太费劲了，这样也违背了react组件化编程的初衷不是？so,这里会将该提出一个公共组件（虽然内容很简单，为了以后使用方便）。

创建好公共组件（BounceSpace）：

export  default class BounceSpace extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isShowBounce: this.props.params.isShowBounce? {display:'block'} : {display:'none'},
            classNameStr:"public-bounce-space "+ (this.props.params.className? this.props.params.className : "" ),
        };
    }
    componentDidMount() {
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            isShowBounce: nextProps.params.isShowBounce? {display:'block'} : {display:'none'},
            classNameStr:"public-bounce-space "+ (nextProps.params.className? nextProps.params.className : "" ),
        });
    }
    render() {
        return (
            <div className = 'bounce-space-content' style={this.state.isShowBounce}>
                <div className={this.state.classNameStr} ></div>
            </div>
        );
    }

}
export  default BounceSpace;

代码解释：

isShowBounce用于控制是否显示该组件,使用display；
控制显示还可以使用如下方式

{flag &&<BounceSpace />}

classNameStr用于提供自定义样式，例如根据不同手机上软键盘的高度

这个组件很简单，就是一个有高度的div而已。用的时候直接导入即可，通过一个标记，来控制是否显示。

例如上面props.params.isShowBounce，或者flag,这两个值为true控制显示，为false进行隐藏该组件，将该组件放到页面元素最底部，进而增加页面长度。

显示的时候不用问，肯定是输入框获得了焦点吧，此时将该标记设置成true，显示出来。当输入框失去焦点时再将该标记设置成false进行移除。
个人推荐使用阿里家的antd-mobile中的input组件，为什么呢？那里已经给你写好了焦点回调函数，绝对比自己封装input写的好用（可能需要你自定义一下人家的样式哈），反正我是将自己的组件改成阿里的了。

思考一下，失去焦点时为啥还要移除这个组件呢？
原因：如果不移除的话，当键盘收起时，页面滑到底部会有很大一个空白，明明没有内容了为何还要给予滑动呢？市场上的APP都不会存在这样的东东吧？所以最好控制移除。

由于软键盘的高度各个手机中可能不一样，设置底部div的高度可通过那个自定义样式进行处理。

组件样式：

@import "../../style/val.scss";
.bounce-space-content {
  .public-bounce-space{
    position: relative;
    height: 5.69rem;
    width: 100%;
  }
}

思考：如果存在某种可能，输入框还是无法被顶上去该怎么办呢？请关注下期更新！

由于本人工作原因时间有限，终极版解决方案请移步到 前端e家 公众号历史文章：
第8期《React WebApp输入框遮挡问题（终极版）！》