React中的模态对话框

Question

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

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

这个的问题是当我使用输入框的onChange事件并执行setState时，如果我不执行setState则会关闭模式对话框，然后模态对话框是readonly。

当父级中的值发生更改并且还应更新模式对话框时，我应该如何规避此更新输入框。

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

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

Answer 1

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