Question

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

Answer 1

您可以使用value属性代替defaultValue，一旦检查它就可以正常工作，并且可以像<Modal isOpen ={this.state.isModalOpen} autoFocus={true}> </Modal>一样打开Modal。通过使用isModalOpen属性，您可以打开模式。如果您使用setState，它也要等到您将isModalOpen的值设置为false时才会关闭。

React中的模式对话框

1 个答案: