React DatePicker移动端虚拟键盘遮挡问题求助

嘿，我之前在做React项目时也碰到过移动端日期选择器被虚拟键盘遮挡的问题，结合你的代码（已经用到了withPortal，这步很对！），给你几个实用的解决方案：

因为你已经开启了withPortal={isMobileView}，日期选择器会被挂载到body下，我们可以给这个Portal容器添加自定义样式，让它固定在视口底部而不是中间，这样键盘弹出时就不容易被遮挡：

首先给日期选择器的Portal容器加样式（可以用全局样式或者你的CSS模块）：

/* 全局样式或CSS模块 */
.react-date-picker__portal {
  position: fixed !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 9999 !important;
  max-height: 70vh; /* 限制高度，避免超出视口 */
  overflow-y: auto; /* 内容过多时允许滚动 */
}

移动端虚拟键盘弹出时，window.innerHeight会明显变小，我们可以监听这个变化，动态调整选择器的位置：

如果是类组件，在生命周期里添加监听：

componentDidMount() {
  this.handleResize = () => {
    const portalElement = document.querySelector('.react-date-picker__portal');
    if (!portalElement) return;
    
    // 当视口高度小于屏幕高度的70%时，判定为键盘弹出
    const isKeyboardOpen = window.innerHeight < window.screen.height * 0.7;
    portalElement.style.bottom = isKeyboardOpen ? '120px' : '20px';
  };
  
  window.addEventListener('resize', this.handleResize);
}

componentWillUnmount() {
  window.removeEventListener('resize', this.handleResize);
}

如果上面的方案还是有适配问题，不如在移动端直接使用原生的<input type="date" />——它完全适配移动端系统，不会被键盘遮挡，体验更贴合原生：

修改你的组件渲染逻辑：

render() {
  const { date } = this.state;
  const arrivalDate = this.store.state.searchParameters.Arrival;
  
  return isMobileView ? (
    <input
      type="date"
      className={css.datePicker}
      value={date ? date.toISOString().split('T')[0] : ''}
      onChange={(e) => this.changeHandler(new Date(e.target.value))}
      onBlur={this.handleBlur}
      name={this.props.name}
      min={arrivalDate ? arrivalDate.toISOString().split('T')[0] : ''}
    />
  ) : (
    <DatePicker
      className={css.datePicker}
      todayButton={'Today'}
      selected={date}
      onChange={this.changeHandler}
      onBlur={this.handleBlur}
      name={this.props.name}
      minDate={arrivalDate}
      disabledKeyboardNavigation
      withPortal={isMobileView}
      onChangeRaw={e => e.preventDefault()}
      onFocus={e => e.preventDefault()}
      onKeyDown={e => e.preventDefault()}
    />
  );
}

你代码里的onFocus={e => e.preventDefault()}可能会阻止浏览器默认的滚动到元素的行为，如果你需要保留这个逻辑，可以手动在focus时滚动页面到选择器位置：

handleFocus = (e) => {
  e.preventDefault();
  const pickerElement = document.querySelector('.datePicker');
  if (pickerElement) {
    pickerElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
  }
};

然后把onFocus={this.handleFocus}加到你的DatePicker组件里即可。

内容的提问来源于stack exchange，提问作者Wasyster