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 显示属性