反應句柄異步表格

我正在使用一個窗體組成的幾個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

反應句柄異步表格

回答

相關問題