问题标签 [react-modal]

在熟悉 React 时，我偶然发现了开发人员文档中门户的概念。但是，我很难理解这个门户组件实际上是如何按需呈现的，以及我如何将数据传递给它以填充模式。

目前，我有两个相互交互的组件：View.js和DataTable.js.

View.js：

现在对于DataTable组件，正在呈现一个反应表。当用户单击单个行时，我的目标是弹出一个模式（我仍然不清楚如果我使用 React 门户，这是否需要有自己的单独组件）并填充数据已经绑定到单个行（我测试过并且也可以访问）。

代码看起来像这样：

现在这是传递给表格行道具并在点击时执行的函数：

我需要的数据在对象中很容易获得rowInfo.original。现在我的问题是：当执行诸如此 onClick 触发器之类的事件时，使用门户加载模式的“正确”或“最佳实践”方式被认为是什么？

1. 我是否需要有一个Modal.js实际上是门户的单独组件？
2. 我如何从这个onRowClick函数中获取传输到这个模态门户的数据？

感谢大家。

我使用 react 和 react-modal 在网站上创建覆盖。此叠加层包含各种元素以及一个表单（下面的概述）。我希望能够使用 TAB 键引导用户完成表单。我分配tabindex=0给所需的元素以按出现顺序可选项卡。

我的问题是：它在 Chrome（版本 61.0.3163.100）中不起作用，而在 Firefox 中起作用。我读到，如果 DOM 树上的任何元素不可见或高度/宽度为 0，就会发生这种情况。我做了一些样式更改来解决这个问题，但没有任何效果。

如您所见，其中一个父元素具有tabindex="-1". 当通过 Chrome 中的检查功能或使用 JS 以编程方式更改它时，问题仍然存在（或者如果元素最初使用此索引呈现，是否存在差异？）。

更新

我意识到是其他原因导致了这些问题。initial: all我在模态框的根节点上使用 CSS 属性将我的内部 CSS 与外部的所有内容隔离开来。由于某种原因，这阻止了 tabindex 的工作。如果你能帮助我理解，我会奖励这个赏金。我的解决方法就是不使用all: initial（无论如何它不兼容 IE，但我知道也没有真正好的替代方案）。

我有一个React Bootstrap Table，表的每一页都有 20 条记录。在每一行中，我使用以下行添加了一个按钮

然后我在这个页面中有 20 个按钮，每一行都有一个按钮。如果单击其中一个按钮，我打算打开一个模式。但是当我单击一个按钮时，openModal()按预期运行一次，但render()我的功能AttachmentManager将运行 20 次。如何解决这个问题？

以下是我的模态

首先，我定义这个组件以在模态窗口中重用

模板 1：

现在在第二个组件中，我称之为：

单击一个按钮，我 setState showModal ：true，我的模态已打开，我可以在模态外部单击，实际上模态消失了，但我的 state.showModal 仍然是：true，如何更新此视图中的状态？

在我的主要组件 App.js 中，我有一个从 redux 存储接收到的数据数组，如下所示：

数组中的每个对象都包含有关我映射以显示为预览卡的帖子（如 reddit 帖子）的信息。单击该预览卡后，将显示一个模式卡，其中包含帖子的详细视图。

在<PostCardDetails />组件中，我从 redux 存储接收相同的数据数组，并以相同的方式映射它以将数据显示为 UI。它显示正确，但问题是当我单击卡片预览时，它显示错误的详细卡片（不是您根据预览期望的卡片）。

这是github repo，以防需要更多上下文。

我已经超越了这一点——能够回答这个问题的人将获得对永恒的爱和尊重。

我构建了一个在 3rd 方网站上作为小部件实现的 react-app。该小部件使用 REST API 并根据应用程序的状态以反应模式呈现不同的内容。为了构建应用程序，我使用 webpack。现在出现以下问题：

**在一个特定站点上，模态仍然会在单击时打开，但不会呈现任何内容（尽管有很多具有适当值的子组件）。**

• 此问题仅出现在一个特定站点上。该站点是一个 magento 页面，其中包含许多其他内容
• 如果我复制相关站点的 HTML 标记并将其放在我自己的服务器上，我的反应应用程序将按预期工作。这就是为什么我排除了 js 库之间的任何冲突，因为它们也会出现在这里。
• 在任何其他网站上，我的反应应用程序按预期工作
• chrome 开发工具中没有控制台错误或警告
• 所有测试都已在清除存储的情况下运行，以确保由于缓存文件而没有任何工作/不工作

以下是一些我希望相关的代码，但我不确定问题实际上出在这部分。根据render()状态定义不同的组件：

然后在模态中呈现值

通过检查这些值，我可以说它component实际上包含正确的值。此外，如果我进行测试并渲染，<Modal><p>Hello World!</p></Modal>它也不会像开头所说的那样渲染，但它仅适用于一个特定的主机站点，它通常在任何地方都有效。

我正在使用 react-modal 但我关闭模式的按钮没有触发 onClick={this.handleCloseModal} 使模式内的按钮完全没有响应。我已经尝试了几个小时不同的事情，但无法弄清楚为什么这不起作用。控制台中没有弹出错误，我无法控制台记录任何内容....请参阅下面的代码，我只是一直在用头撞墙而没有答案。我对做出反应还很陌生，但觉得这应该可以正常工作，因为没有错误。先感谢您！

我对反应相当陌生，并且在反应中重做了我的个人网站。我遇到的问题是我的按钮（带有 href）链接到我的每个投资组合演示的 JSfiddle 不起作用。我不确定我是否没有正确绑定，或者除了模式打开之外，问题究竟出在哪里，演示按钮不起作用。关闭模式按钮工作正常。请看下面的代码。

问题出在“modal-footer”类的第一行。如果 havLink 属性为真，此按钮将显示。此数据正在从另一个 JS 文件中导出。其他所有内容（图像、描述、模式标题）都正确导入，即使我设置的链接也正确导入，但是当按下按钮时，没有按我预期的那样触发。我的 React 开发工具中也没有看到任何错误。

{details.link} 作为 href 不会将我路由到指定的链接。该链接将显示在段落标签中（只是为了查看是否填充了正确的链接）。

让我知道是否需要其他任何东西，我希望解决方案与错误绑定一样简单。先感谢您！

我对反应模式有疑问。我有列表，SingleElement点击后它应该出现模式窗口，其中包含点击元素的更多详细信息。带有数据的 JSON 存储为状态，并且从 Modal 内部我找不到获取所需元素的方法。

这是模态内部render()函数：

以下是负责显示/隐藏模式窗口的方法：

如何使用 react-modal 包在 React 应用程序的控制台中修复此警​​告：

警告：react-modal：未定义 App 元素。请使用Modal.setAppElement(el)或设置appElement={el}

我还没有成功弄清楚el应该是什么。

上下文：在我的 App.js 根组件文件中：

其中...表示未显示代码。

一切正常，但是当 Modal 打开时，我的控制台中会出现以下警告：

index.js:2177 警告：react-modal：未定义 App 元素。请使用Modal.setAppElement(el)或设置appElement={el}。这是必需的，以便屏幕阅读器在打开模式时看不到主要内容。不建议这样做，但您可以通过设置选择退出ariaHideApp={false}。

在react-modal 文档中，我只能找到以下内容：

App 元素 app 元素允许您指定应用程序中应隐藏的部分（通过 aria-hidden），以防止屏幕阅读器等辅助技术读取模态内容之外的内容。

如果你在做服务器端渲染，你应该使用这个属性。

可以通过以下方式指定：

DOM元素
Modal.setAppElement(appElement);
query selector - uses the first element found if you pass in a class.
Modal.setAppElement('#your-app-element');

不幸的是，这没有帮助！我无法弄清楚el应该代表什么。

以下是我尝试添加到我的 Modal 组件的许多属性变体中的一些：

我也尝试过从Modal.setAppElement('root');inside调用，我的组件被注入 的根元素src/index.js在哪里，而 index.js 就是我这样做的地方。rootApp