时间戳

首页 > 解决方案 > React 中的模态对话框

reactjs - React 中的模态对话框

问题描述

我在 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>

标签： reactjsmodal-dialogstateonchangedefault-value

解决方案

您可以使用 value 属性而不是 defaultValue ，一旦检查它就可以正常工作，您可以打开 Modal 之类的<Modal isOpen ={this.state.isModalOpen} autoFocus={true}> </Modal>. 通过使用 isModalOpen 属性，您可以打开模式。如果您使用 setState 也不会关闭，直到您将 isModalOpen 的值设置为 false。

推荐阅读