Next.js聊天模态框适配键盘弹出：如何调整模态框高度？

你的代码无效主要有两个原因：

• 初始useEffect仅在组件挂载时执行一次，如果聊天模态框是通过状态动态渲染（比如点击按钮才显示），此时modalcontent元素还未生成，modalElements会是空数组，后续修改样式自然无效。
• 将DOM元素存储到React状态中是错误的做法，状态应该用来存储数据而非DOM节点，DOM元素引用会随着组件重渲染失效。

下面是两种可行的解决方案：

方案1：使用useRef直接引用模态框元素（推荐的DOM操作方式） #

用useRef来获取模态框元素，避免依赖状态存储DOM节点，在焦点事件触发时直接操作ref指向的元素：

import { useRef } from 'react';

// 定义ref
const modalRef = useRef(null);

const handleInputFocus = () => {
  setInputFocused(true);
  if (modalRef.current) {
    modalRef.current.style.height = "55%";
  }
};

// 模态框组件中绑定ref
<div className="modalcontent" ref={modalRef}>
  {/* 模态框内容 */}
  <input onFocus={handleInputFocus} />
</div>

如果存在多个模态框元素，可使用useRef存储数组来管理：

import { useRef } from 'react';

const modalRefs = useRef([]);

// 动态更新ref数组
const setModalRef = (element) => {
  if (element && !modalRefs.current.includes(element)) {
    modalRefs.current.push(element);
  }
};

const handleInputFocus = () => {
  setInputFocused(true);
  modalRefs.current.forEach(element => {
    if (element) {
      element.style.height = "55%";
    }
  });
};

// 每个模态框元素绑定ref
<div className="modalcontent" ref={setModalRef}>...</div>
<div className="modalcontent" ref={setModalRef}>...</div>

方案2：状态驱动样式（React最佳实践） #

完全避免DOM操作，通过状态控制模态框的类名，用CSS实现高度变化：

import { useState } from 'react';

const [isInputFocused, setIsInputFocused] = useState(false);

const handleInputFocus = () => {
  setIsInputFocused(true);
};

const handleInputBlur = () => {
  setIsInputFocused(false);
};

// 模态框组件根据状态添加类名
<div className={`modalcontent ${isInputFocused ? 'modal--half-height' : ''}`}>
  {/* 模态框内容 */}
  <input onFocus={handleInputFocus} onBlur={handleInputBlur} />
</div>

对应的CSS：

.modalcontent {
  height: 100%; /* 原有高度 */
  transition: height 0.3s ease; /* 可选：添加过渡动画提升体验 */
}

.modal--half-height {
  height: 55%;
}

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