react-bootstrap 模式打开但不会关闭

Question

我最初在与父页面相同的组件中有我的模态代码并且它工作正常，但现在我已经将它移到它自己的组件中，一旦它打开我就无法再关闭模态.我知道之前发布过类似的问题，但它们似乎都在使用 class 组件，我无法找到适合我的解决方案。

为了便于阅读，我删除了不相关的代码

主要成分

import { LoginModal } from '../partials/LoginModal';

export function SignUpButtonGroup() {
  const [showLogin, setShowLogin] = useState(false);
  const handleCloseLogin = () => setShowLogin(false);
  const handleShowLogin = () => setShowLogin(true);

  return (
    <Container>
      <LoginModal showLogin={showLogin} onHideLogin={handleCloseLogin}></LoginModal>
      ...
      <Button onClick={handleShowLogin} className="btn-sign-in btn btn-lg mx-auto" variant="primary">sign in
      </Button>

模态组件

import { Modal } from 'react-bootstrap';
export function LoginModal(props) {

  return (
    <Fragment>
      <Modal show={props.showLogin} onHide={props.handleCloseLogin}>
      </Modal>

Answer 1

您需要在 Modal 组件中通过正确的名称 props.onHideLogin 引用道具。

在主组件中只调用了handleCloseLogin。

react-bootstrap 模式打开但不会关闭

react-bootstrap modal opens but won't close

reactjs

react-bootstrap