在 React 中触发 bootstrap 5 模态确认答案

【问题标题】：Trigger bootstrap 5 modal confirmation in React在 React 中触发 bootstrap 5 模态确认
【发布时间】：2021-01-04 14:03:13
【问题描述】：

我在这里有这个删除按钮，当你点击它时，它会显示bootstrap confirmation modal，看起来像这样：

所以我在这里有这个按钮以及模态的 html 代码：

 <button classNameName="btn btn-sm" data-bs-toggle="modal" data-bs-target="#deleteResortOwner" onClick={() => deleteHandler(resort._id)}>
                      DELETE
                  </button>

<div className="modal fade" id="deleteResortOwner" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteResortOwnerLabel" aria-hidden="true">
  <div className="modal-dialog">
    <div className="modal-content">
      <div className="modal-header">
        <h5 className="modal-title" id="deleteResortOwnerLabel">Modal title</h5>
        <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div className="modal-body">
        <p>Are you sure you want to delete this resort?</p>
      </div>
      <div className="modal-footer">
        <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Not Sure</button>
        <button type="button" className="btn btn-primary">Yes</button>
      </div>
    </div>
  </div>
</div>

现在我的onClick 效果将调用deleteHandler 方法：

  const deleteHandler = (id) => {
            dispatch(deleteResortOwner(id))
    }

这当然会直接删除项目而不显示确认模式。我曾经这样做过，这是一个基本的警告：

const deleteHandler = (id) => {
    if(window.confirm('Are you sure')){
        dispatch(deleteResort(id))
    }
}

但我需要它像模式而不是警报一样运行。想知道我怎样才能做到这一点并且仍然打开模式来进行确认而不是window.confirm？如果单击模式上的“是”按钮，这也必须删除该项目，并在单击“关闭”按钮时简单地关闭模式。

知道怎么做吗？请帮忙。

【问题讨论】：

你能将deleteHandler绑定到模态框内的“是”按钮吗？您可以使用另一个 onClick 函数，它只是切换模式视图但不提交任何数据。
不知道该怎么做。介意根据我上面的代码给我一个演示代码或示例代码吗？对不起，我只是反应的初学者。
类似<button type="button" className="btn btn-primary" onClick={() => deleteHandler(resort._id)}>Yes</button>。并将外部按钮设为<button classNameName="btn btn-sm" data-bs-toggle="modal" data-bs-target="#deleteResortOwner" onClick={() => openModal(resort._id)}> DELETE </button>
还尝试删除按钮上的onClick，但它没有打开模式。
它没有用。未找到 openModal。

标签： reactjs twitter-bootstrap react-redux

【解决方案1】：

使用react-modal NPM 包，然后使用引导程序添加样式。并查看它的文档以获取更多详细信息。

【讨论】：

这是意料之中的。我在某个地方看到过这个，但不，谢谢。