使用 React 表單元件

我們知道在 React 世界中，一眼望去就是滿街的元件。而元件通常就做兩件事情：顯示資料、與用戶互動及接受用戶的輸入資料。

今天我們將討論接收用戶資料的 React 元件，如果你有接觸過 HTML，這些元件基本上就是 <input>, <textarea>, <option> 等 tag，只是微微的不太一樣。

還記得嗎？

前幾篇文章中，我們完成到一半的 TodoApp：

我們做了以下事情：

1. 建立 TodoHeader 元件
2. 建立只能顯示輸入提示的 InputField 元件
3. 建立 TodoList 元件
4. 將上面三個元件包起來，放在 TodoApp 元件中
5. 建立 TodoItem 元件，讓所有待辦項目可以共用 TodoItem 元件，並且在 TodoList 中組合這些元件

今天，我們要完成「新增待辦事項」的功能

這個功能的使用者操作流程是這樣的：

1. 使用者在 InputField 中，輸入新的待辦事項
2. 使用者輸入完成後，會按下 enter，然後
   a. 待辦事項清單中，多了一項新的項目
   b. InputField 將資料清空

所以，因應這樣的一個需求，今天我們就要來修改 InputField 這個元件。

學習重點

今天我們將學習，如何使用 React 的表單元件。

這是今天的程式，你可以跟著做慢慢加入新增待辦事項這一個功能！

第一步、將資料儲存在元件狀態中

在上一篇文章中，我們理解要儲存元件的內部狀態，可以使用 state。

所以，我們在 InputField 中，作了以下這些事情：

1. 在 constructor 初始 value 的狀態值，讓輸入框一開始顯示空字串
2. 在 render 中的 input tag 中，加入 value 屬性，並且給予狀態值；所以當元件的狀態改變，輸入框中的資料也會改變

第二步、傾聽使用者事件，並更新元件狀態

因為現在 input tag 中的 value 屬性始終給予 this.state.value，所以元件狀態沒變時，它就會一直顯示空字串，儘管使用者輸入什麼。

所以我們現在要先傾聽使用者的輸入事件，並在他輸入資料後，觸發狀態改變，因而讓元件重新渲染，value 得到新的 this.state.value。

在這一步中，我們改變了：

1. 加入 _handleChange 的方法，觸發狀態的改變，我們使用 this.setState API 給予新的狀態
2. 加入 onChange 的事件，傾聽使用者輸入，並觸發 _handleChange

第三步、傾聽使用者 key 入 enter 的事件

上面兩個步驟，讓我們完成了當使用者輸入新資料，我們就儲存在 InputField 的狀態中。

現在，我們要傾聽使用者輸入完成，並點下 enter 鍵的事件。

在這一步中，我們做了以下事情：

1. 加入 _handleKeyDown 的方法，判斷使用者的 keyCode 是不是等於 13，也就是 enter；如果是的話，攔截事件，並且不要在觸發其他事件，例如 onChange，因此我們加入 e.preventDefault() 這一行。
2. input 加入 onKeyDown 的事件，觸發 _handleKeyDown

第四步、提供上層元件傳入使用者點下 enter 的 callback

當我們傾聽到使用者輸入 enter，我們要做兩件事情：

1. 將使用者輸入的值，加到待辦清單中，也就是 TodoList
2. 將狀態清空，輸入框顯示空字串

這一步中，我們在原本傾聽到 enter 的地方，做了以下事情：

1. 從 props 中取得 callback — onSubmitEditing，設計這個 callback 的用意是因為我們要告知上層元件：使用者已經案 enter 了，也就是輸入完成了，我負責把使用者輸入完成的內容傳給你，再來就看你要幹嘛了唷！
2. 所以在下一行，onSubmitEditing && onSubmitEditing(this.state.value)，這一行是說如果上層元件有遞給我這個 callback，我就呼叫它，並將現在的輸入值傳進去。
3. 再來就清空 value 的狀態值，記得，更新狀態都要使用 this.setState()

第五步、取得 InputField 的完成值，並新增待辦事項

承上一步，所以我們的上層元件 TodoApp 就要遞 onSubmitEditing callback 給 InputField 元件囉。

這一步中，我們：

1. 將 todos 交給 TodoApp 的 state 去管理
2. 在 TodoApp 加入 _createTodo 來負責加入新的待辦事項，通常在實戰中，你也可以將新的資料同步到伺服器端
3. 然後 TodoList 得到新的 todos，並重新渲染整個 App，使用者就可以看新的待辦事項囉

重點整理

在這章節中，我們更深入的了解在 input 中，可以透過 value 和 onChange，來管理使用者輸入的資料。

最後的結果跟程式，你可以參考這支 jsfiddle。

下集預告

下一篇，也將是本系列的最後一篇，「React 元件的生命週期」，盡請期待囉！

你應該會想看的

上一篇系列文章

動態產生多個 React 元件