无法在没有错误的情况下从外部打开模态 MaterializeCSS答案

【问题标题】：Can't externally open modal without error MaterializeCSS无法在没有错误的情况下从外部打开模态 MaterializeCSS
【发布时间】：2020-10-23 17:17:13
【问题描述】：

我有一个在页面底部弹出的标准模式，我还有一个函数，可以在整个页面中创建许多不同的组件，所有这些组件都有一个“播放”按钮，单击该按钮时会调用传递的函数在改变 modal 的 open 属性的 props 中

供参考：

  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 |   }

我推断这是因为我没有打开模态的模态触发器。

【问题讨论】：

你的反应版本是什么？
@knada 16.14.0，我目前的解决方法效果很好，但是，如果你有另一种更具体的方法，我很想知道。

标签： reactjs typescript tsx

【解决方案1】：

经过深思熟虑，我转到调用触发模态的方法的按钮，并删除了我添加到其中的“模态触发器”类名，现在它工作正常。我仍然不确定这是否是外部触发模态的最佳方法。

【讨论】：