React 中的模态对话框

Posted 2023-03-07

【中文标题】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，一旦检查它就可以正常工作，您可以像 <Modal isOpen =this.state.isModalOpen autoFocus=true> </Modal> 一样打开 Modal。通过使用 isModalOpen 属性，您可以打开模式。如果您使用 setState 也不会关闭，直到您将 isModalOpen 的值设置为 false。