Question

我需要点击链接关闭模态窗口。我的模态窗口：

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关闭窗口？

关闭窗口而不重定向：

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

重定向但窗口没有关闭：

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

谢谢！

Answer 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生成的灰色背景）。

我的总体建议是使用隐藏当前模态和淡入淡出的效用函数。 Smth喜欢：

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', '');
};

结论：您无法立即使用清除React隐藏Bootstrap。使用React-Bootstrap或使用util函数（就像我提供的那样）。

react-router-dom单击关闭引导模式窗口上的链接

1 个答案: