反应句柄异步表单

Question

我正在使用一个由几个FormControl对象（react-bootstrap）组成的表单和一个google自动完成的自定义表单控件（带react-geosuggest库），我遇到的问题是geo-suggest异步返回值。

1. 当用户搜索位置时，我立即（同步）搜索到的搜索值的一侧，在从{{1}检索地址的LatLng时调用我的代码中的回调} component（因为组件执行http请求）。

2. 当用户点击“保存”按钮时，我会提取表单的状态，然后打算将其发送到服务器。

我的问题是，如何使用我需要的LatLng信息“等待”react-geosuggest组件的回调？

我提出了一个解决方案，但它并不是很优雅：

1. 允许按钮组件向表单组件注册回调。
2. 因为我不知道用户是先搜索某个位置还是插入一些常规数据值，所以将从表单组件内的两个函数调用回调：
   • 从注册到react-geosuggest组件的回调函数（将检查表单是否已填写，调用保存按钮的回调）。
   • 来自componentDidUpdate，它将检查表单是否已填满且位置的回调已被调用（即我们收到了LatLng），并将调用保存按钮的回调。
3. 现在，用户可以在调用回调之前或调用回调之后单击“保存”按钮。所以我基本上必须在两个地方再次检查这一点（在回调中：点击了按钮？在按钮点击处理程序中：是否收到了回叫？收到数据？）并采取相应行动。

有没有人知道更好的模式可以使用，或者是否有意支持我的方法？

如果重要的话，我也在使用Redux。

Answer 1

您可以通过以下方式执行此操作。 从react-geosuggest回调中，调用handleSubmit函数。

在表单中，将 onChange 函数添加到输入字段，并将数据存储在您的反应状态中。

单击提交按钮，禁用输入字段并将this.state.submit设置为true。

现在在handleSubmit函数中，执行以下操作：

if (this.state.submit) {
  sendDataToServer(this.state)
}
else {
  this.handleSubmit()
}

这将确保仅从react-geosuggest回调中调用handleSubmit回调。即使异步值在其他表单值（sync）之前到达，即用户在调用位置搜索之后单击提交按钮，仍然不会将数据发送到服务器，直到收集了所有表单数据为止