问题描述
我在页面底部弹出一个标准模式,还有一个函数在整个页面上创建许多不同的组件,所有这些组件都有一个“播放”按钮,单击该按钮可以调用传递的函数在改变模式的开放属性的道具中
供参考:
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 | }
我推断这是因为我没有打开模态的模态触发器。
解决方法
考虑之后,我转到了调用该方法的按钮,该方法触发了模态,并删除了我添加到它的“ modal-trigger”类名,现在可以正常使用了。我仍然不确定这是否是从外部触发模态的最佳方法。