问题标签 [react-modal]

我有一个反应模式，它呈现它的孩子：

我有另一个组件可以在某些子项中呈现 BaseModal 传递：

我有一个呈现 MyModal 的组件：

问题是在 MyModal 中，组件挂载时 this.dateInput 没有定义。每当我渲染 MyView 时，它都会渲染 MyModal，但 MyModal 渲染 BaseModal，它仅在将道具“isOpen”设置为 true 时才渲染它的子级。

当我渲染 MyView 时，我看到控制台日志“已安装 BaseModal”、“已安装 MyModal”，然后在 doSomeSetup 方法中看到 console.log 的“未定义”（即尚未执行 ref 回调）。然后，当我单击 MyView 中的按钮以打开模式时，我看到 console.log “在输入参考中”。所以我希望在 MyModal 中的输入发生的设置没有发生，因为实际表单输入的 ref 仅在 React Modal 将 prop isOpen 设置为 true 时执行。

另一种设置是进行以下更改：

但是，现在有以下行为。当我渲染 MyView 时，我看到“BaseModal 已安装”、“MyModal 已安装”。当我单击按钮打开模式时，我看到“在输入引用中”并且实际的输入元素被 console.logged。

这是奇怪的事情（尽管在我写这篇文章时，我开始看到我自己的疑惑的答案）：假设我在 MyModal 的渲染方法中添加了一个按钮，它只是改变了 inputVal 的状态，强制一个重新渲染：

现在，当我单击按钮时会发生什么是“在输入引用中”，然后执行来自 doSomeSetup 的 console.log 并产生“null”，然后我得到另一个“在输入引用中”，然后是来自的 console.log doSomeSetup 产生一个实际的输入元素。所以实际上似乎传递给 BaseModal 的子项（我的按钮和表单）首先被卸载，然后再次被安装（我认为这是因为当节点卸载时，引用回调被调用为 null 作为参数）。这很奇怪。

所以现在，我想我的问题是：以上是否有意义，父组件每次卸载和安装其子组件是否正常？这甚至是描述正在发生的事情的正确方式吗？

更准确地说，我想要的功能是将事件处理程序添加到 doSomeSetup 中的输入。但似乎任何时候输入都要改变，因为它包含在 BaseModal 的一个子节点中，它是 BaseModal 的一个道具，后者以某种方式决定卸载和安装子节点。为什么不只是重新渲染孩子？有一个更好的方法吗？

我觉得我错过了一些可能很愚蠢的东西。如果用户想要更改他们的头像照片，我会弹出一个模态表单。该函数正在运行并更新我的数据库，当我更改状态时它会变得一团糟......所以这是处理模态提交的函数：

这是模态：

我已经尝试内联绑定这个函数，以及在构造函数中......但它只是告诉我另一个错误，它已经绑定到组件。

同样，该功能正在工作，它只是在服务器响应后挂断在 this.setState 上。

任何帮助表示赞赏，谢谢！

我在我的应用程序中使用了 react-modal，但我无法轻松地将它呈现在当前屏幕内容之上。模态始终呈现在屏幕底部（甚至在 html 正文下方）。

这是我的自定义模式：

SimpleModal 组件包含在我的顶级容器（AppContainer）的渲染功能中，如下所示：

请注意，我没有调整样式/css，因此它使用默认样式，因此使用默认定位方案。

谁能帮我找出这个错误？任何帮助将不胜感激。

编辑：这是我在代码中提到的 CSS 条目（可能是一些多余的元素）：

我正在使用 react 构建一个应用程序，我有一个页面，所有图像都动态显示。我希望这些图像在我单击时以反应模式打开。如何设置要显示的图像的模式

我应该在模式中设置什么属性以便它适用于所有图像

我从这里的一个开源项目开始：

https://github.com/vega/voyager

让它工作，我想添加一个模式。

所以我跑了：

然后我补充说：

我在 ./src/components/header/chrono-history.tsx (5,9) 中的构建错误中得到了这个：错误 TS2305: Module '"/Users/brennanwallace/psa/voyager/node_modules/@types/react -modal/index"' 没有导出的成员 'ReactModal'。

并且 web-storm 同意存在问题，因为它在文本编辑视口中给出了相同的错误。

我能做些什么？

我是键入脚本的新手，但文件似乎按顺序排列：

在 node_modules 的 @types 中有一个 react-modal 文件夹，其中 index.d.ts 与其他几个模块一样（它缺少其他包似乎具有的 types-metadata.json 文件）。

还有一个 react-modal 包。

tsconfig.json 文件似乎也按顺序排列：https ://github.com/vega/voyager/blob/vy2/tsconfig.json

我目前正在使用 react-native 开发 Android 和 iOS 版本，但在 iOS 版本上出现以下错误：

undefined 不是一个对象（评估 'UIManager.AndroidTextInput.Constants'）

所以我刚刚开始学习 React，对于我的第一个小项目，我决定使用 Marvel API 制作一个简单的 UI。例如，我有一个数组显示所有以某个字母开头的奇迹字符；用户输入“h”，然后显示以字母 h 开头的每个字符。当用户单击一个字符时，会弹出一个模式并显示有关该特定字符的信息。

我的问题是，当用户单击图片打开模式时，数组中每个字符的所有模式都会打开。我不知道如何只制作选择打开的模式。

免责声明：这是我的第一个 reactjs 应用程序，所以请随时告诉我应该阅读哪个部分。

我正在使用 react-modal 创建一个简单的模态。有 2 个非常相似的模态，所以我创建了一个 AuthModal，它包含了两个模态、一个登录模态和一个注册模态的内容。我希望能够从 3 或 4 个不同的地方（可能更多）触发模式打开。但是，我被困住了。我不确定如何将模式变成某种“全局”组件，以及我应该如何从不同的按钮打开它。

如您所见， this.refs.modal.openModal()} /> 是打开模式的内容。现在这限制了我能够从不同的地方打开模式。，因为我必须创建一个全新的组件实例。有没有办法使用 Mobx 将它变成一个“全局”组件，或者有人可以指出我要阅读的正确主题吗？

我是反应新手。

我正在尝试使用 React-Bootstrap Modal 组件创建 2 种不同样式的 Modal：一种带有橙色标题，另一种带有白色标题（也就是没有标题）。

2 种类型的标题 img

使用的模态样式取决于它的使用位置。例如，我希望在登录和注销时出现白色标题，并且只显示这 2 个模式。现在，.modal-header CSS 看起来像是应用于任何 Modal.Header 声明的默认样式。我的 modal-header 类具有橙色标题的样式：

我不希望将此样式应用于注册和登录模式。我尝试创建这个新的 CSS ID modal-no-header 并将其添加到注册和注销 js 文件中的 Modal.Header 声明中：

在我的 CSS 中：

在 SignupModal.js 中：

但是，#modal-no-header 样式不会覆盖默认的 .modal-header 类：

不工作，包括检查元素截图

问题：这是在 React-Bootstrap 中为 Modal 组件指定多种样式的正确方法吗？如果没有，有没有更好的方法，你怎么做？我查看了文档，但没有发现任何有用的信息。提前致谢。

我正在使用 react-select 在我使用 react-modal 创建的模式上有一个选择字段。如图所示，资产未正确显示（箭头未显示，可显示列表未正确显示）。

modal 有一个自定义的 z-index（因为它显示在另一个具有自己的 z-index 的元素的顶部），方式如下：

我认为这是问题所在，但我无法将 z-index 正确添加到 react select 以正确显示 ir。

如果需要，我可以添加模式和选择的代码。