React：从 React Modal 组件触发一个函数

Question

更新：代码沙箱 link - https://codesandbox.io/s/goofy-dubinsky-4ui5v?file=/src/SearchRow.js

有一个用例，我们有一个搜索结果 table 并且有些行有一个按钮，可以出于业务目的审核该行数据。现在，当用户单击该按钮时，我们需要提示用户进行确认，但我们仍然不知道如何触发它。

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

我的 ConfirmationModal 包装了我的 Modal，并允许我传入一个 onConfirm 方法，然后当有人单击成功按钮时我可以调用该方法。然后我也从我的包装器控制我的 Modal 'show'。

Answer 2

据我所知，您只想在单击按钮后呈现模式，虽然这对于非 React 环境来说很自然，但在 React 中它以不同的方式工作。在最简单的解决方案中，Modal 应该始终呈现，当用户单击按钮时，您将模式打开属性更改为 true。

因此，您可以将显示和隐藏模态的逻辑从 Modal.js 移动到 SearchRow.js，然后当用户单击 showSaveButton 按钮时，您可以将 showModal 设置为 true，并在 return 方法中检查该变量是否为真，如果是，则显示模态，否则 return null。其次，您将两个函数作为 props 传递：如果按下模态上的“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;

React：从 React Modal 组件触发一个函数

React: Trigger a function from React Modal component

javascript

reactjs

react-modal

react-hooks