确认框反应js后调用保存功能

Question

我使用下面的弹出窗口作为确认消息。目前，弹出窗口 window 正在使用 'Yes'、'No' 按钮正确加载。如果用户点击确认'YES'按钮，我需要保存数据，如果点击'NO'我需要关闭弹出窗口window。请检查我的文件。

我的模态框

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;

我在发票表格中调用此模式。当用户点击保存按钮时。这个确认显示。目前，它正在运行。

Invoice.js 文件-保存功能

    import SaveConfirmationModal from "components/createinvoice/SaveConfirmationModal";
      const [showModal, setShowModal] = useState(false);

      const saveInvoice = (data) => {
     setShowModal(true);
    //in here i need to check user click yes or no button 
   

     if(yes){
    
    httpPost(SAVE_INVOICE,data, header)
    .then((response) => {
    if (response.status === 200) {
    toast.success('Successfully Saved', {position: toast.POSITION.TOP_RIGHT})
    }
    })
    }
        }
else{
 setShowModal(false);
}

根据我的要求，我需要检查用户在 saveInvoice 函数中点击是或否。
我如何在函数内部检查它。

Answer 1

您需要创建 2 个函数，一个用于点击，另一个用于不点击。

const [data, setData] = useState();

const saveInvoice = (data) => {
    setShowModal(true);
    setData(data);
}

const onYes = (event) => {
    httpPost(SAVE_INVOICE, data, header).then((response) => {
        if (response.status === 200) {
            toast.success('Successfully Saved', {position: toast.POSITION.TOP_RIGHT})
        }
        setShowModal(false);
        setData(null);
    })
}

const onNo = (event) => {
    setShowModal(false);
    setData(null);
}

return (
    ...
    {
        showModal && (
            <Modal onYes={onYes} onNo={onNo} />
        )
    }
    ...
)

如果需要，您可以 show/hide 仅设置 data 变量的模式。

const [data, setData] = useState();

const saveInvoice = (data) => {
    setData(data);
}

const onYes = (event) => {
    httpPost(SAVE_INVOICE, data, header).then((response) => {
        if (response.status === 200) {
            toast.success('Successfully Saved', {position: toast.POSITION.TOP_RIGHT})
        }
        setData(null);
    })
}

const onNo = (event) => {
    setData(null);
}

return (
    ...
    {
        data && (
            <Modal onYes={onYes} onNo={onNo} />
        )
    }
    ...
)

确认框反应js后调用保存功能

call save function after the confirmation box react js

javascript

reactjs

react-bootstrap