如何在另一个组件反应js中显示引导模式

Question

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

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

用这个更新你的 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}/>

Answer 2

就像 React 中的所有组件一样：

• 导入：import UpdateUserModal from "./UpdateUserModal";
• 致电：<UpdateUserModal />

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

Answer 3

使用 typescript 从 react.js 中的不同组件打开 Modal - react bootstrap

这是我的模态

import React, { useState } from "react";
import _classes from "./MyModal.module.scss";
import { Button, Modal } from "react-bootstrap";
import Link from "next/link";

type Props = {
  show: boolean | undefined;
  handleClose?: () => void;
  handleShow?: () => void;
};

const Modal = (props: Props) => {
  const { show, handleClose, handleShow } = props;

  const [showModal, setShowModal] = useState(show);

  return (
    <div className={`${_classes["generate-api-key-modal-cover"]}`}>
      <Modal
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
        show={show}
        onHide={handleClose}
        footer={null}
      >
        <Modal.Body className="text-center px-8 lg:px-44">
          <h4 className="text-2xl">MODAL Opened</h4>
          <p className="text-base py-3.5">
            A verification email has been sent your registered email address.
            Please check your mail.
          </p>
          <Button
            variant="primary"
            type="submit"
            className="bg-primary text-sm py-3 mb-32"
          >
            <Link href="/dashboard">
              <span className="cursor-pointer ml-1 text-sm">
                Proceed to dashboard
              </span>
            </Link>
          </Button>
        </Modal.Body>
      </Modal>
    </div>
  );
};

export default MyModal;

这就是我所说的

import React, { useState } from "react";
import { Button } from "react-bootstrap";
import MyModal; from "../../../../common/components/MyModal";

const CallModalInthisComponent = () => {
  const [showModal, setShowModal] = useState(false);

  const handleClose = () => setShowModal(false);
  const handleShow = () => setShowModal(!showModal);

  return (
    <>
      <div className="container-fluid flex justify-center items-center h-100">
        <div className=" bg-white  max-w-[600px] flex flex-col px-24 py-24">
          <h4 className="text-[26px] fond-medium leading-[31px] py-2 px-6 text-center">
            My modal Opening Screen
          </h4>
          <p className="text-xs leading-[16px] py-2 px-5 text-center text-gray-1">
            Sed at orci efficitur, tincidunt turpis vitae, luctus purus. Morbi
            eleifend sagittis sem ut tempor.
          </p>
          <Button
            variant="primary"
            className="text-sm py-3 my-2"
            onClick={() => handleShow()}
            // disabled={buttonDisable}
          >
            Open Modal from Here
          </Button>
        </div>
      </div>
      <MyModal
        show={showModal}
        handleClose={handleClose}
        handleShow={handleShow}
      />
    </>
  );
};

export default CallModalInthisComponent;