输入框聚焦时react-bootstrap Modal未自动弹出问题求助

问题原因 #

1. 模态框没有自动触发显示：FancyModalButton 组件内部控制模态框显隐的show状态初始值为false，组件被父组件渲染后没有主动执行显示逻辑，因此仅会渲染触发按钮，不会自动弹出模态框。
2. 输入框失焦逻辑冲突：输入框绑定的onBlur事件会直接将hasFocus设为false，只要输入框失去焦点（例如点击弹出的模态框区域）就会直接卸载FancyModalButton组件，导致模态框无法正常交互。

修复方案 #

推荐将模态框的显隐状态提升到父组件管理，避免子组件卸载和状态冲突问题，修改后代码如下：

父组件 SearchGuest

import React, { useState, useEffect } from "react";
import stays from "./Components/stays.json";
import FancyModalButton from "./Components/FancyModalButton";

export default function SearchGuest() {
  const [Data, setData] = useState([]);
  const [filteredData, setFilteredData] = useState(Data);
  const [showModal, setShowModal] = useState(false);

  useEffect(() => {
    setData(stays);
    setFilteredData(stays);
  }, []);

  return (
    <>
      <form action="">
        <FancyModalButton show={showModal} onClose={() => setShowModal(false)} />  
        <input
          onFocus={() => setShowModal(true)}
          type="text"
          name="guest"
          placeholder="text"
          style={{ border: "1px solid yellow" }}
        />

        <input type="number" name="location" placeholder="number" />
        <button>Search</button>
      </form>
    </>
  );
}

子组件 FancyModalButton

import React from "react";
import { Button, Modal } from "react-bootstrap";

export default function FancyModalButton({ show, onClose }) {
  return (
    <>
      {/* 不需要显示触发按钮可直接删除下方Button代码 */}
      <Button variant="primary" onClick={onClose}>
        Modal
      </Button>

      <Modal show={show} onHide={onClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={onClose}>
            Close
          </Button>
          <Button variant="primary" onClick={onClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

如果不想修改状态层级，也可以在子组件中添加挂载时自动显示的逻辑，同时调整父组件onBlur的触发条件，避免点击模态框时卸载子组件。

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