处理输入字段时如何处理 React setState()？

Question

我有 3 个文本框。 我有 1 个下拉菜单。

当应用启动/页面加载时，文本框为空，下拉列表中填充了各种产品。

当我从下拉列表中选择一个项目时，我会将对象加载到文本字段中进行编辑。

使用属性 (this.props) 时，数据会正确加载到文本框中，但我无法对文本进行编辑，因为应该使用 state 来代替。

但是，如果我使用状态 (this.state)，组件永远不会保持同步。如果我从下拉列表中选择第 1 项，它会加载到状态中，但在我从下拉列表中选择另一个项目之前不会呈现到屏幕上。

所以当我选择第 2 项时，它会将第 1 项加载到文本框中。

引用自 React 文档。

“setState() 不会立即改变 this.state 而是创建一个挂起的状态转换”

你们是怎么处理这个问题的？我觉得我都试过了。

Answer 1

您需要将状态保留在父组件中。父级将是所有这些文本框和下拉菜单的父级。从那里，您只需将回调函数作为道具传递给文本框和下拉组件。在该回调函数中，您应该将选定的下拉菜单项作为参数。并且在调用该函数时，您需要更新文本框的内容。我认为您可以通过保持三个文本框的状态来做到这一点，即当前显示的文本。最初它们的状态是未定义的，因此它们会显示为空。在该状态下，您可以跟踪索引和值。

之后，您还需要将回调函数传递给文本框。然后，这些回调函数将在您编辑字段时跟踪和更新下拉菜单项的内容。当您编辑时，您将调用回调，它应该更新状态，并使用新内容再次呈现下拉菜单。