反应句柄异步表格

我正在使用一个窗体组成的几个FormControl对象（react-bootstrap）和一个自定义窗体控件的谷歌地方自动完成（与react-geosuggest图书馆），我有问题的事实，地理建议异步返回值。反应句柄异步表格

当用户搜索的位置，从该我立即（同步）收到搜索值的一侧，在我的代码的回调被在所述地址的经纬度的检索从react-geosuggest组件调用（因为组件执行http请求）。
当用户单击保存按钮时，我提取表单的状态，然后打算将其发送到服务器。

我的问题是，如何“等待” react-geosuggest组件与经纬度信息，我需要回调？

我想出了一个解决方案，但它不觉得很优雅：

允许按钮组件注册一个回调到窗体组件。
因为我不知道，如果用户首先搜索的位置或插入一些常规数据值，回调将从表单组件内的两个函数调用：
- 从注册到react-geosuggest组件回调FUNC（其将检查表单是否填满，请调用保存按钮的回调）。
- 从componentDidUpdate，它将检查表单是否填充，并且位置的回调已被调用（即我们收到LatLng），并调用保存按钮的回调。
现在，用户可以在回调被调用之前或者在被调用之后点击保存按钮。所以我基本上必须在两个地方再次检查（在回调中：是否点击了按钮？并且在按钮单击处理程序中：是否调用了回调并收到了数据？）并采取相应措施。

有没有人知道一个更好的模式使用，或惊人地想支持我的方法？

P.S我正在使用Redux，如果它很重要。

来源

2016-11-13 Jjang

如果您使用的是redux--为此表单设置一部分状态并在异步完成时标记，或者只是设置该表单周围的状态位，以便拥有任何需要使标记正确的标志决定？你可以通过让REDX为你做的事来简化你需要管理的东西......这就是它的原因:) – ajmajmajma

1.表单输出不是我的UI的一部分，我知道把数据与UI相关并且不需要在状态下呈现是不推荐的，但应该驻留在类实例本身中...... 2.然而，我可以在状态中保存一个标志，然后处理'componentDidUpdate'中的所有逻辑，检查表单是填充＆我有LatLng，如果是的话，然后调用保存按钮的回调... – Jjang

如果你只是用redux控制表单，那么不需要打扰反应生命周期，那并不意味着你把整个表单放在redux中，只是你需要控制的部分。 – ajmajmajma

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

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

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

在handleSubmit功能

现在，请执行下列操作：

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

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

来源

2017-04-15 05:09:31 sidag95

刚刚注意到问题日期：P Nevermind，希望这可以帮助别人 – sidag95

反应句柄异步表格

回答

相关问题