React：從 React Modal 組件觸發一個函數

Question

更新：代碼沙盒鏈接 - https://codesandbox.io/s/goofy-dubinsky-4ui5v?file=/src/SearchRow.js

有一個用例，我們有一個搜索結果表，有些行有一個按鈕，用於出於業務目的審核該行數據。 現在，當用戶點擊那個按鈕時，我們需要提示用戶進行確認，而我們卻被困在如何觸發這個問題上。

在 TODO 部分 (SearchRow.js) 中做什么？

這是主要的 SearchResultsPage.js

return (
  {results.map((searchRow) => {
    <SearchRow content={searchRow.content} showSaveButton={searchRow.content.id === 10} />
  });
);

SearchRow.js

function SearchRow({content, showSaveButton}) {
  const getConfirmation = (event) => {
     // TODO: Call Modal.js, if user presses yes then call the saveProductData function, otherwise return
  }

  const saveProductData = async () => {
    await axios.post("url", content);
  }

  <div>
    <p>{content.title}</p>
    {showSaveButton && 
      <Button variant="primary" onClick={(e) => getConfirmation(e)} />
    }
  </div>
}

最后 Modal.js

function Modal({
  heading,
  message,
  buttonSuccess = "Yes",    
  buttonFailure = "No",
  showModal = false,
}) {
  const [show, setShow] = useState(showModal);

  return (
    <BootstrapModal show={show} onHide={setShow(false)}>
      <BootstrapModal.Header closeButton>
        <BootstrapModal.Title>{heading}</BootstrapModal.Title>
      </BootstrapModal.Header>
      <BootstrapModal.Body>{message}</BootstrapModal.Body>
        <BootstrapModal.Footer>
          <Button variant="secondary" onClick={setShow(false)}>
            {buttonSuccess}
          </Button>
          <Button variant="primary" onClick={setShow(false)}>
            {buttonFailure}
          </Button>
       </BootstrapModal.Footer>
    </BootstrapModal>
  );
}

有人可以就如何實現這一目標提供幫助，或者是否有其他更好的方法或任何建議？

提前致謝 ：）

Answer 1

據我所知，您只想在單擊按鈕后渲染模態，而這對於非反應環境來說是很自然的，在反應中它以不同的方式工作。 在最簡單的解決方案中，應始終呈現 Modal，當用戶單擊按鈕時，您將 modal open 屬性更改為true 。

因此，您可以將顯示和隱藏模態的邏輯從Modal.js到SearchRow.js ，然后當用戶單擊showSaveButton按鈕時，您可以將showModal設置為true ，並在return方法中檢查該變量是否為真，如果是，則顯示模態，否則返回null 。 其次，你傳遞兩個函數作為道具：如果按下模態上的“ YES ”按鈕，第一個將執行，如果按下“ NO ”按鈕，將執行第二個。

這是您修改后的代碼：

SearchRow.js

function SearchRow({content, showSaveButton}) {

  const [showModal,setShowModal] = useState(false);
  
  const displayConfimationModal = (event) => {
     setShowModal(true);
  }
  
  const handleConfirmation = (event) => {
    console.log("confirmed");
    await saveProductData();
    setShowModal(false);
  }
  
  const handleDecline = (event) =>{
    console.log("declined");
    setShowModal(false);
  }

  const saveProductData = async () => {
    await axios.post("url", content);
  }
  
return (
  <div>
    <p>{content.title}</p>
    {showSaveButton && 
      <Button variant="primary" onClick={(e) => displayConfimationModal(e)} />
    }
     {showModal ? ( < Modal onConfirm = {handleConfirmation}  onDecline={handleDecline}/>) : null}
  </div>);
}

Modal.js

function Modal({
  heading="Default heading",
  message="Default message",
  onConfirm,
  onDecline,
  buttonSuccess = "Yes",    
  buttonFailure = "No",
}) {
  

  return (
    <BootstrapModal>
      <BootstrapModal.Header closeButton>
        <BootstrapModal.Title>{heading}</BootstrapModal.Title>
      </BootstrapModal.Header>
      <BootstrapModal.Body>{message}</BootstrapModal.Body>
        <BootstrapModal.Footer>
          <Button variant="secondary" onClick={onConfirm}>
            {buttonSuccess}
          </Button>
          <Button variant="primary" onClick={onDecline}>
            {buttonFailure}
          </Button>
       </BootstrapModal.Footer>
    </BootstrapModal>
  );
}

export default Modal;

Answer 2

我的ConfirmationModal包裝了我的Modal ，並允許我傳入一個onConfirm方法，然后當有人單擊成功按鈕時我可以調用該方法。 然后我也從我的包裝器控制我的Modal “顯示”。

Answer 3

好的，所以我已經想出了如何解決這個問題。 請通過代碼沙箱 - https://codesandbox.io/s/goofy-dubinsky-4ui5v?file=/src/SearchRow.js

我們缺少的是從父函數發送 Modal 顯示屬性