创建新的 Stock List Item 不会打开 Materialise Modal，但初始状态项目有效答案

【问题标题】：Creating new Stock List Item does not open Materialize Modal, but initial state items work创建新的 Stock List Item 不会打开 Materialise Modal，但初始状态项目有效
【发布时间】：2020-07-10 08:01:57
【问题描述】：

这是我在 Stack Overflow 上的第一篇文章。很高兴成为社区的一员！

我正在创建一个股票市场应用程序项目。我遇到了一个有趣的问题。我在我的项目中通过 Bootstrap 使用 Materialize。我正在用 React 编码。在我的初始状态下，我有 2 支股票，Apple 和 FaceBook。每当我单击它们时，都会打开模式，每个模式都会显示更多股票信息。但是每当我添加新股票（如 JPM）时，该项目就会显示出来，但每当我点击时，它就不会打开。

在物化中，您使用 jquery 初始化模式，如下所示（index.html）。然后你像我一样在每个项目上进行 href 和 ID 匹配。我检查了为摩根大通创建的新产品，它说 href="#JPM" 和 id="JPM" 就像其他工作一样。我唯一能想到的是，也许每当 jquery 初始化时，当我添加一个项目时，它也没有被初始化？但我不确定，因为它只是一行简单的代码：

$('.modal').modal();

Def 在这里很困惑。 github存储库如下。我还将发布我的 StockItem.js 文件的一些屏幕截图。 https://github.com/Christopher-Bowling/Stock-Market-App

图片： Index.html StockItem.js

【问题讨论】：

不知道为什么我的部分帖子是粗体顺便说一句哈哈

标签： reactjs api typeerror dispatch

【解决方案1】：

每次创建需要初始化的新元素时，都需要运行组件初始化。

当您运行 $('.modal').modal() 时，jQuery 会查找 dom 中的任何元素并在其上运行 .modal() 函数 - 一次。任何动态添加的元素（在此初始值运行后添加）将表现得好像您根本没有运行过初始值。它在选择文档页面上被触及：

初始化

此外，您需要单独调用任何动态生成您的页面生成的选择元素。您必须初始化选择元素，如下所示。

https://materializecss.com/select.html

【讨论】：

感谢您回复并确认问题。现在我可以在解决方案上归零！有没有人对如何解决这个问题有任何想法？几个小时以来，我一直在尝试不同的想法，但没有任何效果。我什至在半夜醒来并尝试了一些东西，怀疑这是问题所在，但没有得到任何工作哈哈。
任何时候有重新渲染，你都需要重新初始化。所以我猜是使用 vanilla js 方法。
酷。我想到了。在 Individual StockItem.js 文件中，我添加了这个并导入了 "import M from 'materialize-css': useEffect(() => { var elems = document.querySelectorAll('.modal'); M.Modal.init(elems ); },);