javascript - 为什么模态 MaterializeCSS 打不开

标签 javascript reactjs materialize

我正在使用 React 和 MaterializeCSS 编写应用程序,但模式窗口未打开

导入:

import 'materialize-css';
import options from 'materialize-css';
import M from 'materialize-css';

模态js:

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, options);
});

模态:

<a className="red waves-effect waves-light btn modal-trigger" href="#modal1">Удалить аккаунт</a>
<div id="modal1" className="modal">
   <div className="modal-content">
      <h4>Внимание!</h4>
      <p>Убедитесь, что вы действительно хотите удалить свой аккаунт, все данные об аккаунте будут утеряны и восстановить аккаунт невозможно</p>
   </div>
   <div className="modal-footer">
      <a href="/auth" className="modal-close waves-effect waves-green btn-flat" onClick={buttonDeleteAccount}>Удалить аккаунт</a>
   </div>
</div>

最佳答案

取出未声明的options变量:

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems);
});

始终先检查控制台!

关于javascript - 为什么模态 MaterializeCSS 打不开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61639067/

相关文章:

javascript - 在 Noesis Javascript.net 中保存上下文状态

javascript - 避开收费公路特征权重值说明

javascript - react props={this.refs.something} undefined

javascript - 使用状态和模板文字进行重定向 react

javascript - 如何在单击按钮时获取最近的隐藏输入字段的值

javascript - 通过脚本传递参数

reactjs - WebStorm 中未使用的导出默认值

javascript - 粘性导航栏需要占用空间

html - Flex(Materialize valign-wrapper)在 IE 中不起作用

javascript - Materialise 模态不工作