如何在 React 中调用单个模态框组件？

Question

我想 open/load 反应 bootstrap 模型框组件 (Modalbox.js) 到 App.js，但是模态框打开按钮代码在 App.js ，怎么做？请帮忙。在App.js中，将有多个按钮用于调用多种类型的模态框。 modalbox.js 应该只包含模态框代码。模式启动按钮应该在 App.js

<button variant="primary" onClick={handleShow}>Launch demo modal</button>

https://codesandbox.io/s/individual-modal-box-component-ti6ugg

Answer 1

您应该在 App.js 中创建一个名为“showModal”的布尔值状态。将该状态作为 props 传递给 Modal。同样在您的 handleshow 函数中，您应该基于 prevState 设置状态，如下所示：setShowModal((prevState)=> !prevState)。在您的模态组件中，您应该使用您传递的 showModal 道具，但请记住永远不要将道具用作 useStates 中的默认值。

Answer 2

我只在节目中添加了功能，这里隐藏的是代码，这样您就可以得到想法道具并相应地管理状态所有剩余的代码，您可以随意添加更多功能和客户状态

    import "./styles.css";
    import Modalbox from "./Modalbox";
    import { useState } from "react";
    export default function App() {
    const[handleShow,sethandleShow] = useState(false)
  return (
<div className="App">
  <button variant="primary" onClick={()=>sethandleShow(!handleShow)}>
    Launch demo modal
  </button>
 <Modalbox handleShow={handleShow} sethandleShow={sethandleShow} />
</div>
 );
}

modalbox.js

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

  function Modalbox(props) {
  const [modalshow, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

   return (
<div>
  {/* <Modal show={modalshow} onHide={handleClose}> */}
  <Modal show={props.handleShow} onHide={()=>props.sethandleShow(!props.handleShow)}>
    <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={()=>props.sethandleShow(!props.handleShow)}>
        Close
      </Button>
      <Button variant="primary" onClick={handleClose}>
        Save Changes
      </Button>
    </Modal.Footer>
  </Modal>
</div>
  );
 }

 export default Modalbox;

Answer 3

你把显示Modalbox的状态放在里面，但它从外面不知道什么时候显示。恐怕您至少必须将显示状态设置为 App.js。剩下的逻辑可以保留在Modalbox.js.

我分叉了你的 condesandbox：

https://codesandbox.io/s/individual-modal-box-component-forked-moy9ok

另一种可能性是使用 Context API 并可能为其编写一个挂钩。那么你就不需要直接将状态传递给 Modalbox。但它并不是真正适合 Context API 的用例。而是用于螺旋钻井。

如何在 React 中调用单个模态框组件？

How to call an individual modal box component in react?

reactjs

react-bootstrap