React自定义模态框问题：输入框无法点击+对话框点击误关闭

问题1：输入框无法点击聚焦 #

这个问题通常是父元素的事件处理干扰了鼠标交互，或是样式设置导致输入框无法响应点击：

• 检查模态框背景/外层容器的事件处理，移除任何 e.preventDefault() 调用（比如在 onMouseDown 或 onClick 中），这个方法会阻止输入框的点击聚焦行为。
• 排查CSS样式，确保输入框及其父容器没有设置 pointer-events: none，该属性会让元素完全忽略鼠标事件。
• 确认没有透明元素覆盖在输入框上方，可通过调整 z-index 确保输入框处于顶层。

示例修复：
如果你的背景容器有类似代码：

<div className="modal-backdrop" onClick={handleClose} onMouseDown={(e) => e.preventDefault()}>

修改为：

<div className="modal-backdrop" onClick={handleClose}>

问题2：点击模态框对话框触发关闭 #

这是事件冒泡导致的——点击对话框的事件会向上传递到背景层，触发关闭逻辑。只需在对话框容器上阻止事件冒泡：

在模态框的内容对话框元素上添加 onClick 事件，调用 e.stopPropagation()：

<div className="modal-dialog" onClick={(e) => e.stopPropagation()}>
  {/* 模态框内容、输入框等 */}
  <input type="text" placeholder="点击测试聚焦" />
</div>

这样点击对话框内部时，事件不会传递到外层背景，也就不会触发关闭函数。

核心代码示例 #

const Modal = ({ isOpen, onClose }) => {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal-dialog" onClick={(e) => e.stopPropagation()}>
        <h3>自定义模态框</h3>
        <input type="text" />
        <button onClick={onClose}>关闭</button>
      </div>
    </div>,
    document.getElementById('modal-root')
  );
};

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