移动端input输入时底部按钮被虚拟键盘顶上解决办法

前言

遇到了在输入框输入时底部按钮被虚拟键盘上去的问题，把解决办法分享一下

解决办法

文本通过监听页面高度的变化对按钮进行隐藏控制

代码实现

import React, {useState } from "react";

const BottomView = ({ children, ...props }: any) => {
  const defaultPageHeight = document.documentElement.clientHeight;

  const [isBtn, setIsBtn] = useState(true);

  window.onresize = () => {
    if (defaultPageHeight > document.documentElement.clientHeight) {
      setIsBtn(false);
    } else {
      setIsBtn(true);
    }
  };

  if (isBtn) {
    return <div {...props}>{children}</div>;
  }
  return "";
};

export default BottomView;