如何在另一个组件中显示 bootstrap 模态反应 js

Question

我正在使用 react bootstrap Modal 现在我有了 Modal 我想在不同的组件中显示该模态以提供所提供的编辑功能。我如何存档这个

UpdateUserModal.js

import React,{useState} from 'react'
import {Modal} from 'react-bootstrap'

const UpdateUserModal = () => {

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

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

  return (
    <div>
        <Button variant="primary" onClick={handleShow}>
        Launch demo 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>
    </div>
  )
}

export default UpdateUserModal

我想在不同的组件按钮上添加我的 <button type="submit" className="btn btn-warning mx-1">{<FaUserEdit/>} Edite</button>

更新：

Answer 1

与 React 中的所有组件一样：

导入：import UpdateUserModal from "./UpdateUserModal";
称呼它：<UpdateUserModal />

查看以下沙箱以获取快速示例：https://codesandbox.io/s/divine-water-7sofms

Answer 2

用这个更新你的UpdateUserModal.js。

import {Modal} from 'react-bootstrap'

const UpdateUserModal = (props) => {
const {show, handleClose, handleShow} = props


  return (
    <div>
        <Button variant="primary" onClick={handleShow}>
        Launch demo 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>
    </div>
  )
}

export default UpdateUserModal

现在，无论您希望在何处使用此模式，都可以在此处创建此状态和功能：

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

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

现在在您想要的编辑按钮上，通过单击按钮更新您的状态，

onClick={()=> handleShow()}

然后导入调用：

import UpdateUserModal from "./UpdateUserModal";
<UpdateUserModal show={show} handleClose={handleClose} handleShow={handleShow}/>

如何在另一个组件中显示 bootstrap 模态反应 js

how to show bootstrap Modal in another component react js

javascript

bootstrap-modal

reactjs

react-bootstrap