问题标签 [react-modal]

I'm working with React MDL library, and I used pre-defined components like FABButton

And it shows the button as in the image bellow:

Now, what I want is showing a dialog with the + icon... not as what happens here:

This happened after this code:

The class of dialog is as follows:

The above code is with the required import statements

我有一个带有主屏幕的应用程序，在这个屏幕上我正在渲染一个打开的模态button press，在里面Modal我有一个按钮应该将我导航到另一个屏幕，它正在正确导航但是当我导航到另一个屏幕时，模态不会不消失，怎么隐藏？

添加代码进行演示

家：

模态：

React Material-Ui 具有Dialog具有该属性的组件modal，当我将其更改为true或false显示相同的结果时，该属性是什么意思？

这真的让我很困惑，请帮助我？

材质UI版本：0.20.0

代码

我已将 react-modal 用于模态对话框，

在我的 reactjs render() 中，我有以下模式

但是当这个对话框打开时，后面的项目是重叠的，我怎么能只有对话框是可见的而不是背景元素？

重叠的元素是具有单选按钮的组件。普通文本不重叠。我怎样才能让这些按钮不重叠？

我尝试设置 zIndex 并应用样式，但这不起作用。

另外，当我还单击键盘上的 esc 时，如何关闭？

React-modal在 React 14 中非常适合我们。

我们升级到 React 16 并收到以下错误。

invariant.js:38 未捕获错误：Modal.render()：必须返回有效的 React 元素（或 null）。您可能返回了未定义、数组或其他一些无效对象

我们使用来自 GitHub 的确切示例代码，并且我们已经重新安装了react-modal. 有任何想法吗？

应用程序.js：

example_modal.js：

我正在使用非常棒的react-modal 。是否可以动态调整它的大小（可能使用 css 媒体标签）。例如，

1. 对于大屏幕，模态仅占屏幕的一小部分（假设最大宽度为 200px；
2. 对于中等屏幕，模态占据了大部分屏幕（假设是屏幕宽度和高度的 80%
3. 对于移动设备，它占据了 100% 的宽度和高度。

在这里，当用户单击 UserProfile 组件的图片时，会打开一个包含图片详细信息的模式。但是当用户关闭模式时，会产生错误。错误：无法在 t.value (PostListItem.js:68) 处读取未定义的属性 'uid' 我认为 t 试图在模式关闭后渲染 postlistItem，这不应该发生，因为在关闭模式时内容设置为 ''。

//用户资料

//内容模式

我想实现像 Airbnb/Medium 这样的身份验证模式。当我在登录模式中单击“注册”时，登录模式关闭，注册模式打开。我阅读了 react-modal 文档，但没有看到这样做的方法。谁能帮我找到解决方案。谢谢。

所以我将数组中的数据映射到一个轮播中，总共创建了 20 个轮播项目。每个元素都有嵌入其中的“相同”按钮。当单击该按钮时，我想将每个元素的相关数据发送到模式中，老实说，我什至不知道从哪里开始。

这是我目前用于此组件的代码：

编辑：突出显示我想传递给相关模式的数据。

我使用react-responsive-modal 在我的反应应用程序中打开一些模式。当我打开模态时，有一个叠加效果使模态后面的背景变暗。有什么方法可以将背景变暗 100% 或为背景设置任何颜色，这样在我再次关闭模态之前，我无法看到在打开模态之前存在的东西？

ModalComponent我在我的 modal 中创建了一个新组件，MainComponent当我单击按钮时会呈现该组件：

ModalComponent：

主要组件：