如何在 React 应用程序中折叠 bootstrap 导航栏 onclick？

Question

我正在尝试让 bootstrap 菜单在单击 link 后折叠。

我设法将以下脚本添加到 index.html 并且它工作正常，直到我将 ReactScroll 添加到 Navbar.js 组件。在菜单外单击仍然可以正常工作，但如果在菜单内单击菜单项，则在按下汉堡包按钮之前不会折叠。

请问如何解决这个问题？

        $(function() {
        $(document).click(function (event) {
          $('.navbar-collapse').collapse('hide');
        });
      });
    </script>```

Answer 1

您始终可以使用 ReactStrap 库，它是 Bootstrap 使用 React 组件的一个实现。这是他们 documentation:

的一个例子

import React, { useState } from 'react';
import { Collapse, Button, CardBody, Card } from 'reactstrap';

const Example = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (
    <div>
      <Button color="primary" onClick={toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
      <Collapse isOpen={isOpen}>
        <Card>
          <CardBody>
          Anim pariatur cliche reprehenderit,
           enim eiusmod high life accusamus terry richardson ad squid. Nihil
           anim keffiyeh helvetica, craft beer labore wes anderson cred
           nesciunt sapiente ea proident.
          </CardBody>
        </Card>
      </Collapse>
    </div>
  );
}

export default Example;

如何在 React 应用程序中折叠 bootstrap 导航栏 onclick？

How to collapse a bootstrap navbar onlick within a React app?

jquery

reactjs

react-bootstrap