React 中的模态对话框

Posted

技术标签:

【中文标题】React 中的模态对话框【英文标题】:Modal Dialog in React 【发布时间】:2019-08-18 19:44:38 【问题描述】:

我正在使用 React 应用程序并希望在单击按钮时打开一个模式对话框。我在我的应用程序中使用物化 css。我可以很好地打开模态对话框,但模态对话框内的输入框有一些问题。我的意图是通过属性将值传递给模态对话框中的子组件,并在输入框中显示该值。这是第一次正常工作,因为我正在设置输入的 defaultValue 属性。

下次如果我通过属性向模式对话框发送一个新值,它不会更新子组件内的输入框值,但会继续显示默认值设置或用户更改的值。我尝试使用该值而不是 defaultValue,但它也要求 onChange 事件并使用组件的状态来设置输入框的值。

问题是当我使用输入框的 onChange 事件并执行 setState 时,如果我不执行 setState,它会关闭模态对话框,然后模态对话框是只读的。

当父级中的值发生变化时,我应该如何绕过这个来更新输入框,并且应该更新模态对话框。

这就是我在模态对话框中使用带有输入框的子组件的方式

<input  type="text"
id="min_" + this.props.index + "_inputId"
key="min_" + this.props.index + "_inputKey">
defaultValue=this.props.Value                                               
onBlur=function (event)  that.props.onBlur(event, this.props.index)                       
</input>

【问题讨论】:

创建模式的最佳方法是反应门户。 Portal 在 root 之外渲染,因此其他 css 样式不会影响它。这是链接reactjs.org/docs/portals.html 【参考方案1】:

您可以使用 value 属性而不是 defaultValue,一旦检查它就可以正常工作,您可以像 &lt;Modal isOpen =this.state.isModalOpen autoFocus=true&gt; &lt;/Modal&gt; 一样打开 Modal。通过使用 isModalOpen 属性,您可以打开模式。如果您使用 setState 也不会关闭,直到您将 isModalOpen 的值设置为 false。

【讨论】:

以上是关于React 中的模态对话框的主要内容,如果未能解决你的问题,请参考以下文章

MFC模态与非模态对话框

为啥 MFC 中的模态对话框实际上是内部无模态的?

NVDA 在读取模态对话框中的焦点元素后读取所有模态内容

Material-ui 样式对话框/模态背景

如何创建一个模态的对话框

模态与非模态对话框