如何在函数内显示反应引导模式答案

【问题标题】：how to show react bootstrap modal inside the function如何在函数内显示反应引导模式
【发布时间】：2021-03-22 14:31:51
【问题描述】：

我正在使用反应引导模式弹出窗口。当用户提交表单时，我需要模态显示弹出窗口，

这是我的模态（SaveConfirmationModal）

    import { Button, Modal} from "react-bootstrap";
function SaveConfirmationModal(props) {
  return (
    <div>
      <Modal {...props} size="lg">
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">
            do u want to save ?
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <button>YEs </button>
          <button>No</button>
        </Modal.Body>
       
      </Modal>
    </div>
  );
}

export default SaveConfirmationModal;

这是我的发票页面保存功能。我将我的模式导入发票页面。

import SaveConfirmationModal from "components/createinvoice/SaveConfirmationModal";
 const loadPopup= (data) => {
  showmodal;
  if(yes){
    saveForm();
    }
else{
close modal
}
}

const saveForm= (data){
 my save function
}

发票页面中的我的保存按钮

<button onClick={loadPopup}> Save </button>

这是演示我的问题的非常小的示例。如果可以，请帮我出示此确认框。谢谢

【问题讨论】：

您可以发布发票页面的代码吗？你在哪里渲染按钮？

标签： javascript reactjs react-bootstrap

【解决方案1】：

您可以从如下所示的按钮单击上的道具调用函数。

import { Button, Modal} from "react-bootstrap";
function SaveConfirmationModal(props) {
  return (
    <div>
      <Modal {...props} size="lg">
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">
            do u want to save ?
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <button onClick={props.onYes}>YEs </button>
          <button onClick={props.onNo}>No</button>
        </Modal.Body>
       
      </Modal>
    </div>
  );
}

export default SaveConfirmationModal;

然后在您的发票页面中创建一个用于显示模式的状态并传递如下所示的道具。

import { useState } from 'react'
import SaveConfirmationModal from "components/createinvoice/SaveConfirmationModal";
 
const InvoicePage = () => {
  const [showModal, setShowModal] = useState(false);
  
  const saveForm = (data) {
   // my save function
  }

  
  return (
    <>
      <button onClick={() => setShowModal(true)}> Save </button>
      <SaveConfirmationModal show={showModal} onYes={() => saveForm(data)} onNow={() => setShowModal(false)} />
    </>
  )
}

【讨论】：

我的保存按钮如下
使用表单 onSubmit 提交表单。
我如何修改这个
但这不是您在问题中提出的问题。

【解决方案2】：

在使用 SaveConfirmationModal 的组件中，可以使用 state Hooks，如下所示：

import React, {useState} from 'react';
...
  const [showModal, setShowModal] = useState(false);

  const loadPopup = () => {
    setShowModal(true);
  };

当模式被关闭时，您需要将状态更改为 false： <SaveConfirmationModal show={showModal} onHide={() => setShowModal(false)}

【讨论】：