React design Model 模態框中加入表單
一、我要實現的功能：選中表格中的一行數據進行編輯，編輯方式爲，彈出模態框，顯示相應的數據，並進行表單提交操作，從而實現數據的修改，界面如下圖：
二、說一說我遇到的問題，那就是在獲取表單數據，使用setFieldsValue,對錶單進行賦值時報了錯，報錯如下圖：
分析一下原因，我這裏我是使用了refs去獲取form對象，我們看一下頁面代碼：
這個代碼的作用就是，彈出模態框，並顯示錶單。注意看：我這裏ref={this.formRef}是寫在了Form組件裏，彈出模態框時，表單也顯示了，但爲什麼沒有獲取到setFieldsValue呢？經過查詢資料可以知道：可以通過React.createRef()創建Refs並通過ref屬性聯繫到React組件。Refs通常當組件被創建時被分配給實例變量，這樣它們就能在組件中被引用。從這句話中可以看出，form組件並沒有被創建，所以無法獲取到實例變量。
但這裏有一個很詭異的情況，那就是我們先用form表單進行submit提交數據後，它卻能夠獲取到setFieldsValue對象了，也不會報之前的錯了。
這裏特此說明下，就是一開始點擊編輯，並沒有創建form組件，無法獲取到refs對象，當進行數據添加後，表單觸發refs，創建了refs對象，所以再次點編輯就是正常的。
三、說一說解決辦法：
PS：今天突然又遇到這個問題，又想了一種辦法，特此加上：
那就是我們用form包裹model模態框，這樣就能操作到refs了。
這裏我查詢了官方的文檔，在裏面找到了答案，這裏就不用過多的重複說，看了文檔代碼你就明白了：
文檔網址：https://ant.design/components/form-cn/#components-form-demo-register
這裏只是對自己在學習中遇到的一些困難做一下記錄，裏面還有許多沒有弄清楚的地方，希望哪個大神看到了，能帶帶我。
有問題請聯繫我：[email protected]
編寫人：洪偉富