javascript - 输入处于焦点状态时的调节器模态渲染不起作用

Question

在我的反应项目中，我希望在输入字段处于悬停状态时弹出一个模式。我正在使用 react-bootstrap 模式。但我遇到的问题是它只是在输入处于焦点状态时显示的模式按钮。当输入被聚焦时，模式应该会自动弹出。我的代码如下。请协助

应用组件

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 [hasFocus, setFocus] = useState(false);

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

  return (
    <>
      <form action="">
      {hasFocus ? <FancyModalButton /> : null}  
        <input
          onFocus={() => setFocus(true)}
          onBlur={() => setFocus(false)}
          type="text"
          name="guest"
          placeholder="text"
          style={{ border: "1px solid yellow" }}
        />

        <input type="number" name="location" placeholder="number" />
        <button>Search</button>
      </form>
   
      {console.log(filteredData)}
    </>
  );
}

模态组件

import React, { useState } from "react";
// import Modal from "styled-react-modal";
import { Button, Modal } from "react-bootstrap";

export default function FancyModalButton() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <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={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

我所拥有的形象

标签： javascriptreactjsnext.jsbootstrap-modalreact-bootstrap