reactjs - 无法在没有错误的情况下从外部打开模态 MaterializeCSS
问题描述
我有一个在页面底部弹出的标准模式,我还有一个函数在整个页面中创建许多不同的组件,所有这些组件都有一个“播放”按钮,单击该按钮时调用传递给道具的函数改变模态的 open 属性
以供参考:
return (
<div>
<Period openModal={this.openModal} />
<Modal
open={this.state.isOpen}
options={{
...
}}
trigger={document.getElementsByClassName('modal-trigger')}
>
Song Descp and misc
</Modal>
</div>
);
按下按钮时,模式会弹出,但在我收到此错误后不久:
TypeError: document.getElementById(...) is null
_handleTriggerClick
node_modules/materialize-css/dist/js/materialize.js:2990
2987 | var $trigger = $(e.target).closest('.modal-trigger');
2988 | if ($trigger.length) {
2989 | var modalId = M.getIdFromTrigger($trigger[0]);
> 2990 | var modalInstance = document.getElementById(modalId).M_Modal;
| ^ 2991 | if (modalInstance) {
2992 | modalInstance.open($trigger);
2993 | }
我推断这是因为我没有打开模态的模态触发器。
解决方案
经过深思熟虑,我转到调用触发模态的方法的按钮,并删除了我添加到其中的“模态触发器”类名,现在它工作正常。我仍然不确定这是否是外部触发模态的最佳方法。
推荐阅读
- .net - 是否在 SignalR+UWP 中实现了 websocket?
- google-maps - React Native Maps - 新定价
- excel - 右键单击 Project Explorer VBA 中 Excel 中禁用的工作表选项卡
- java - OneSignal customKey 获取错误:缺少返回语句报告
- codenameone - 构建失败,要求 Kotlin 依赖项... kotlin 未使用
- sas - 从 sas 输出报告
- visual-studio - 对类型的非常量左值引用
- linux - 无法在 docker linux 容器中启动 chrome
- react-native - 当我导航到另一个 BottomTabNavigator 时,如何确保完全删除抽屉导航?
- python - 如何修改 pytest 参数?