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,一旦检查它就可以正常工作,您可以像 <Modal isOpen =this.state.isModalOpen autoFocus=true> </Modal>
一样打开 Modal。通过使用 isModalOpen 属性,您可以打开模式。如果您使用 setState 也不会关闭,直到您将 isModalOpen 的值设置为 false。
【讨论】:
以上是关于React 中的模态对话框的主要内容,如果未能解决你的问题,请参考以下文章