ReactJS 提交表單前顯示確認

Question

所以我試圖展示一個自定義確認模式來詢問用戶是否真的想提交表單。

我正在使用onBefore回調來顯示確認，但無法弄清楚如何顯示自定義模態組件而不是標准的 window.confirm 對話框，是否可以做這樣的事情？

post('/submit', {
 data: data,

 // Confirm message before actually submitting form
 onBefore: window.confirm('Submit?'), // show modal here instead of window.confirm

 // Clear inputs on successful submits
  onSuccess: e.target.reset()
})

Answer 1

是的，您可以基於該按鈕返回 boolean 值並使用 async/await 或 Promise 函數將其附加到 dom 並調用 onBefore 事件來創建帶有操作按鈕（取消和確認）的自定義 html。

或者，在提交表單后，通過 state 更改打開確認模式組件； 用戶確認后，訪問 API。

或者，您可能想查看SweetAlert以節省時間。 它的默認形式非常可配置且美觀。

確認示例

sweetAlert(
  {
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",   
    showCancelButton: true,   
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!"
  }, 
  apiCall()
);

Answer 2

我最近用一個簡單的 react-bootstrap modal https://react-bootstrap.netlify.app/components/modal/將可見性設置為一些 state 變量 boolean (show={stateVariableX}) 並且確認按鈕可以觸發提交表格 function 以及將模態可見性設置為 false

Answer 3

我正在用實際代碼擴展Naftalib的答案。

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

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

  const form = useRef(null);

  const handleClose = () => setShow(false);
  const handleFormSubmit = (e) => {
    e.preventDefault();
    setShow(true);
  };

  const submitForm = () => {
    form.current.submit();        
  };

  return (
    <>
      <form ref={form} onSubmit={handleFormSubmit}>
        ...
      </form>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Do you really want to submit?</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Cancel
          </Button>
          <Button variant="primary" onClick={submitForm}>
            Confirm
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}
    

Answer 4

如果理解正確，那么它的問題只是小菜一碟。 您可以在onBefore回調中調用它，並將回調 function 傳遞給模態組件以像這樣處理確認結果。

import React, { useState } from 'react';

function ConfirmModal({ onConfirm }) {
  const [visible, setVisible] = useState(false);

  const handleConfirm = () => {
    onConfirm(true);
    setVisible(false);
  };

  const handleCancel = () => {
    onConfirm(false);
    setVisible(false);
  };

  return visible ? (
    <div>
      <p>Submit?</p>
      <button onClick={handleConfirm}>Confirm</button>
      <button onClick={handleCancel}>Cancel</button>
    </div>
  ) : null;
}

post('/submit', {
 data: data,

 // Confirm message before actually submitting form
 onBefore: (cb) => {
   setConfirmModalVisibility(true);
   setOnConfirm(cb);
 }, 

 // Clear inputs on successful submits
 onSuccess: e.target.reset()
})

function MyForm() {
  const [confirmModalVisibility, setConfirmModalVisibility] = useState(false);
  const [onConfirm, setOnConfirm] = useState(null);

  return (
    <form>
      {/* form inputs */}
      <ConfirmModal visible={confirmModalVisibility} onConfirm={onConfirm} />
    </form>
  );
}