react-router-dom 链接点击关闭引导模式窗口

Posted 2023-02-22

【中文标题】react-router-dom 链接点击关闭引导模式窗口

【英文标题】：react-router-dom Link on click close bootstrap modal window

【发布时间】：2018-09-06 01:00:25

【问题描述】：

我需要通过单击链接关闭模式窗口。我的模态窗口：

export const ModalWrapper = (props) => 
  const  children, title, modalName  = props;
  return (
    <div
      className="modal fade"
      id=`modal-$modalName`
      tabIndex="-1"
      role="dialog"
      aria-labelledby="modal-label"
      aria-hidden="true"
      style= display: 'none' 
    >
      <div className="modal-dialog modal">
        <div className="modal-content" style= overflow: 'hidden' >
          <div className="modal-header">
             title 
            <button type="button" className="close" data-dismiss="modal" aria-hidden="true">×</button>

          </div>
          <div className="modal-body" style= maxHeight: '435', overflowY: 'auto' >
            <ul className="list-unstyled todo-list">
              children
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
;

如何使用 react-router-dom 链接关闭窗口？

它关闭窗口而不重定向：

<Link to="/registration" data-dismiss="modal" className="btn btn-default">Registration</Link>

它重定向但窗口没有关闭：

<Link to="/registration" className="btn btn-default">Registration</Link>

谢谢！

【参考方案1】：

要实现您的目标，您可以：

使用第三方库（例如React-Bootstrap）； 坚持原生代码；

您可以在他们的网站上阅读有关 React Bootstrap 库的更多信息。

如果你想避免额外的依赖，你可以使用 React 的 ref 功能：https://reactjs.org/docs/refs-and-the-dom.html 并使用它来操作 dom（例如，在链接单击或任何其他操作时隐藏对话框）。在这种情况下，只需将 ref 回调函数附加到对话框 dom 元素：

<div className="modal" ref=(input) => this.input = input>
...

在这种情况下，您可以访问 dom 的 className 并从中删除 show 类。请注意，您还必须从淡入淡出容器中删除 show（由 Bootstrap 生成的暗色背景）。

我的总体建议是使用隐藏当前模式和淡出的实用功能。喜欢：

const hideActiveModal = () => 
  const modal = document.getElementsByClassName('modal show')[0];
  const fade = document.getElementsByClassName('modal-backdrop show')[0];
  modal.className = modal.className.replace('show', '');
  fade.className = fade.className.replace('show', '');
;

---

结论：您目前无法使用 clear React 隐藏 Bootstrap。要么使用 React-Bootstrap 要么使用 util 函数（就像我提供的那样）。

【讨论】：

这几乎是完美的 :)) - 你必须从 body 标签中删除类“model-open”。此类禁用较长页面上的滚动。所以添加这个： const body = document.getElementsByTagName("body")[0]; body.classList.remove("modal-open");然后它可以 100% 工作，感谢您的初始帖子！ :)