问题标签 [react-modal]

我的标题（引导程序）中有一个登录组件，当我单击时需要打开一个模式。我正在使用 react-modal（npm 包）中的 Modal。即使我没有收到错误，弹出窗口也不会打开。

标题组件

我正在尝试实现一些可以让我更轻松地操作一些模态（使用反应模态）的东西。我看到很多库以非常简单的方式处理模态，带有回调、承诺等……比如 vex 或 sweet alert

到目前为止，我还没有找到任何通过 react 以简单的方式执行此操作的方法。我看到很多解决方案需要编写模态减速器并在 componentWillReceiveProps 中拦截你想要的东西，但我觉得它有点重。

到目前为止，我到了这个

https://codesandbox.io/s/l24r14pxp7

我正在使用 hoc 在我的组件中传递数据和函数。我喜欢这种方法，因为所有的模态逻辑都可以留在同一个地方，并且作为 react-modal 使用的门户，它们是在相关组件中定义的。

但我觉得将函数直接存储在状态中有点“脏”。你觉得这个怎么样 ？我应该以不同的方式来做吗？

我的主 App 元素中有一个输入框（id=“inputBox”）和一个反应模式，当向这个输入框（通过 onChange 事件）提供一些输入时会弹出一个反应模式。

我想在弹出打开时将反应模式定位在此输入框下方，但无法这样做。

到目前为止，我只能通过计算输入框的偏移量并相应地设置模态覆盖的 style.top/style.left 来相对于视口定位它。但这会导致其他一些问题，所以我需要能够设置相对于输入框的位置。

任何有关如何执行此操作的建议将不胜感激。

在做一个 react-lite 项目时，我还安装了 react。想要在点击按钮时使用 react-modal 创建一个窗口。不能工作。

错误是未捕获类型错误：无法读取未定义的属性“ReactCurrentOwner”。

我尝试重新安装 node_modules，然后 npm 安装，更新，不工作。Package.json：

我有一个带有餐点列表的应用程序，单击餐点应该会在屏幕上显示一个模式，其中包含有关餐点的更多信息。

所以我正在尝试使用react-modal包将基本模式编码为可重用组件。

但是，当我尝试“激活”模式时，它不起作用。该openModal方法确实被触发，但模式没有显示在屏幕上。

应用程序.js：

MealModal.js

我有一个父组件App.js和一个子组件，MealModal.js. 当用户单击特定的餐卡时，它会引发一个模式，该模式应该显示有关餐点的更多信息。

因此，我尝试找到一种方法来动态更改模态数据，具体取决于单击哪个餐卡

我试图将餐点的 id 传递给onClick={this.openModal}函数并将 modalId 的状态设置为函数。但我收到以下错误：

警告：在现有状态转换期间无法更新（例如在render或其他组件的构造函数内）。渲染方法应该是 props 和 state 的纯函数；构造函数副作用是一种反模式，但可以移至“componentWillMount”。

到目前为止，这是我的组件：

应用程序.js：

MealModal.js

关于我如何做到这一点的任何想法？

我必须在模态中使用我的 Login.js 组件：在第一个中，模态在登录后不应该关闭；在第二个中，它必须关闭。

我试图弄清楚如何处理第二种情况：我试过了，但它不起作用：我closeAfterLogin在父级中编写了一个方法并尝试在子级中触发它。

登录.js：

父组件：

任何想法 ？

我想从 of 中的按钮打开一个存在于父组件中的MenuList模式react-select。我用我的按钮创建了一个自定义MenuList并将其传递给react-selectas <Select components={{ MenuList }} />。我不确定如何处理该按钮的单击事件以触发我的模式。

我的代码在这里：https ://codesandbox.io/s/rllz53k8ln

我在我的代码中使用 react-modal。请在下面找到它的风格，

当我单击网格中的任何行时，会弹出模式。但问题是，当我单击行时，行会突出显示并显示在模态前面。我不希望突出显示的行或网格分散模态视图的注意力。

我怎样才能做到这一点？

谢谢

我试图通过从反应类外部更改状态来调用我的模式。但到目前为止还没有运气。我尝试了以下方法：

我有一个名为 Portfolio 的方法，一旦用户单击图像，它就需要激活模式

这是包含状态和模式的类。但我不能改变状态来激活模态。

我正在尝试从 Portfolio 功能激活模态。但由于它在类范围之外，我无法访问该状态。有没有办法做到这一点？