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 设置为 {{1 }}，并在true方法中检查该变量是否为真，如果是，则显示模态，否则返回return。其次，您将两个函数作为道具传递：如果按下模态上的“null”按钮，将执行第一个，如果按下“YES”按钮，将执行第二个。

这是您修改后的代码：

SearchRow.js

NO

Modal.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>);
}

Answer 2

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

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

2 个答案: