react bootstrap offcanvas 自定义关闭按钮

Question

我使用 bootstrap 使用 offcanvas 进行 React 工作。现在我想添加一个自定义关闭按钮，但它似乎不起作用。请指导我做错了什么。

<Offcanvas
        show={show}
        placement="bottom"
        onHide={handleClose}
        {...props}
        className={css["offcanvas-bottom"]}
      >
        <Offcanvas.Header className="p-0">
        <button type="button" class="btn-close text-reset new_close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
          <div className={css["pop-image"]}>
            <Image
              src="https://xxxxxxx/2022030117344459.jpg"
              fluid
            />
          </div>
        </Offcanvas.Header>
        <Offcanvas.Body>
          Some text as placeholder. In real life you can have the elements you
          have chosen. Like, text, images, lists, etc.
        </Offcanvas.Body>
      </Offcanvas>

Answer 1

我在自定义按钮中使用了

onClick

。并通过执行以下操作切换状态

const toggleOffcanvas = () => setShow(!show)

示例：

function ToggleSidebarOffcanvas(){
  const [show, setShow] = useState(false);
  const toggleOffcanvas = () => {
    setShow(!show);
  };
return (
   <Button onClick={toggleOffcanvas}>
         Menu
    <SidebarOffcanvas show={show} toggleOffcanvas={toggleOffcanvas} />
   </Button>)
}

 function SidebarOffcanvas({ show, toggleOffcanvas }) {
  return (
    <Offcanvas className="w-25" show={show} scroll={true} backdrop={false}>
      <Offcanvas.Header
        className="p-0"
        style={{
          backgroundColor: "#008069",
          color: "white",
        }}
      >
        <Offcanvas.Title>
          <div
            className="d-flex align-items-end w-100 mb-2 lh-1"
          >
            <div className="p-2" onClick={toggleOffcanvas}>
              <FiArrowLeft />
            </div>
            <h5 className="ms-3">Profile </h5>
          </div>
        </Offcanvas.Title>
      </Offcanvas.Header>
      <Offcanvas.Body>
        <div >
         ...
        </div>
      </Offcanvas.Body>
    </Offcanvas>
  );
} 

Answer 2

前几天遇到这个问题，大部分内容都在回应@Shlomo。看来您已经差不多了，但错过了

onClick()

。

这是一个简化的示例：

const Sidebar = () => {
  const [show, setShow] = useState(false);

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

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

      <Offcanvas show={show} onHide={handleClose}>
        <Offcanvas.Header>
          <Offcanvas.Title>Offcanvas</Offcanvas.Title>
          <Button onClick={handleClose}>Custom Close Button</Button>
        </Offcanvas.Header>
        <Offcanvas.Body>
          ...Your body...
        </Offcanvas.Body>
      </Offcanvas>
    </>
  );
};

export default Sidebar;

希望这有帮助，React-bootstrap Offcanvas 的文档让我们推断出这种行为。