在這個實時編碼/文章教程中，您將學習如何使用React框架和Redux在網頁上創建自動填充的輸入。

首先，react-redux-form與redux-form他們是相似的，但不一樣。這個問題可能也困惑著很多人，就算使用搜索引擎也未必搜到合適的答案。其次，我們正在討論由Redux驅動的表單。預填充默認值應該像填寫Redux狀態一樣簡單。對？那麼，表單就是在你自己的reducer中生存的，你沒有直接的訪問許可權。他們使用一些內部的狀態來標記輸入，比如dirty，focused，等等。

一個簡單的react-redux-form

這是一個使用react-redux-form構建的簡單表單。它有兩個輸入欄位。提交時，它會將您的值輸出到控制台。

我們的表單從一個model和一個Redux的store開始：

initialUserState描述用戶的形狀，combineForms創建一個特殊的reducer。reducer負責為我們的表單存儲值和驅動UI。

你可能認為你可以向initialUserState添加默認值，我會告訴你這個想法是可以的。但是堅持這個想法之前，我們首先確保要理解react-redux-form。

表單本身作為React組件使用來自react-redux-form的元素。

handleSubmit是我們在用戶通過按提交按鈕或按Enter鍵提交時調用的函數。在我們的例子中，它將值輸出到控制台。render方法使用了一個來自react-redux-form的組件。

它配備了所有必要的Redux接線，所以我們不必擔心這一點。我們使用該組件的子項來定義它如何呈現。在我們的例子中，這是兩個div，一些標籤，一個提交按鈕和兩個組件。

組件帶有我們的表單所需的所有接線工作。他們將處理焦點，模糊，默認值，匹配到正確的模型部分，等等。我們不想手動擔心的一切。

靜態與動態默認值

回到那個明顯的想法。為什麼你不能只使用initialUserState來定義默認值？這個想法是可以的，但是它需要你的默認值是靜態的。

我解釋一下是如果你事先知道它們，你的默認表單值是靜態的。就像當你寫代碼時一樣。這是非常罕見的。如果你正在編輯一個編輯表單呢？在用戶選擇正在編輯的內容之前，您無法知道表單的值。

用react-redux-form填充動態默認值

以下是你要如何做到這一點的：

react-redux-form帶有一堆model動作，actions和reducer。actions是它可以用來做特別的事情，比如填充你的表單。

點擊「更改默認值」按鈕來選擇一個新的隨機用戶。它的名字將填充表格，你可以編輯它到你的store的內容。

為了做到這一點，我們使用了一個名為actions.merge的Redux動作生成器。它讓我們可以將表單model與一組新的默認值進行合併。

首先，我們將UserForm組件連接到Redux。

通常的東西。使用connect連接Redux，從狀態中我們不需要任何道具，我們使用mapDispatchToProps來添加一個叫做setDefaultUser的調度函數。

setDefaultUser是actions.merge的一個curry應用程序。這需要一個值對象，並將其與我們的store中的用戶model合併。

我在這個例子中把它連接到一個onClick回調，所以你可以多次嘗試。

您可以使用的另一種方法是在componentDidMount中調用此操作。這給了你真正的默認值 - 一旦用戶看到它，就填充一個表單。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！