React 表單：Refs 的運用

相信了解前端的小夥伴對 React 並不陌生吧。React 是一個用於構建用戶界面的 Javascript 庫，起源於 Facebook 的內部項目，用來架設 Instagram 的網站，並於 2013 年 5 月開源。React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已經開始關注和使用它。

有些項目的開發中採用 React 來操縱表單，採用 React 的 ref 屬性可以從簡便地從 form 元素中取值，有著不可比擬的優勢。滬江小夥伴拿到了作者的授權，給大家翻譯了 Loren Stewart 的一篇「React Forms: Using Refs」，希望能讓大家對於 ref 屬性的運用有更深入的了解。

原文地址：https://css-tricks.com/react-forms-using-refs/

原文作者：Loren Stewart

譯者：萌萌

校對者：小 boy

翻譯 React 表單： Refs 的運用

React 提供了兩種從 元素中獲取值的標準方法。第一種方法是實現所謂的受控組件，第二種方法是使用 React 的 屬性。

受控組件很重，被展示的值和組件的 state 綁定是它的特性。我們通過執行一個附著在 form 元素上的 事件句柄，來更新被展示的值。 函數更新 state 屬性，進而更新 form 元素的值。

受控組件示例：

input 的值是 （在第7行和第26行）。 函數是 （第 10 - 14 行和第 27 行）。

受控組件最主要的優勢是：

1、便於驗證用戶的輸入

2、可以根據受控組件的值動態地渲染其他組件。例如：一個用戶在下拉列表中選擇的值（如「dog」 或者 「cat」 ）可以控制在 form 中渲染的其他 form 組件（例如：一個設置品種的複選框）

受控組件的缺點是要寫大量的代碼。你需要通過 props 把 state 屬性傳遞給 form 元素，還需要一個函數來更新這個屬性的值。

對於單一表單元素來說這真的不是什麼問題 —— 但是如果你需要一個龐大並且複雜的表單（不需要動態渲染或者實時驗證），過度使用受控表單會讓你書寫成噸的代碼。

從 form 元素取值的簡便的方法是使用 屬性。我們用不同的方式來應對不同的 form 元素和組件結構，所以這篇文章剩下的內容分為以下幾個部分。

文本輸入框、數字輸入框和選擇框

子組件通過 props 傳值給父組件

Radio 標籤集合

Checkbox 標籤集合

1、文本輸入框、數字輸入框和選擇框

使用 的最簡單的例子是文本和數字 input 元素。我們在 input 的 屬性里添加一個把 input 本身作為參數的箭頭函數。我喜歡把參數命名為和元素本身一樣的的名字，就像下面的第三行那個樣子：

由於該參數是 input 元素本身的別名，你可以隨心所欲地為它命名：

接著你可以拿到該參數，並將它賦值給當前 class 內 關鍵字上掛載的屬性（譯者註：這裡的 class 指的是 JSX 所處的 React 組件 class）。input（例如： DOM 節點）可以通過 和 來讀取。它的值可以通過 和 來讀取。

選擇元素也可以用相同的方法（例如：下拉列表）。

選擇元素的值可以通過 獲取。

2、子組件通過 props 傳值給父組件

通過受控組件，父組件獲取子組件的值十分簡單 —— 父組件中已經有這個值了（譯者註：在父組件中定義）！它被傳遞給子組件。同時 方法也被傳給子組件，用戶通過與 UI 互動（譯者註：觸發 ）來更新該值。

雖然該值已經存在於受控組件的父組件中，但是當使用 的時候卻不是這樣。使用 的時候，該值存在於 DOM 節點自身當中，必須向上與父組件通信。

要將該值從子組件傳給父組件，父組件需要向子組件傳遞一個 。然後子組件將節點掛載到 上， 以便父組件讀取。

在我們更深入的探討之前先來看一些代碼。

通過上面的代碼，可以看到一個 form 組件 和一個叫做 的 input 組件。通常，箭頭函數都是在 input 自身上面，但是從這（15 - 27 行）可以看到它是通過 props 傳遞的。由於箭頭函數存在於父組件中，所以 中的 指向父組件。

input 子組件的值被賦給父組件的 屬性，所以父組件可以獲得子組件的值。現在，父組件中的 指的是子組件中的 DOM 節點（例如： 中的 input）。

父組件不僅可以訪問 input 中的 DOM 節點，還可以在父組件內給節點的值賦值。在上文的第 7 行可以看到例子。一旦表單被提交， input 的值就被設置為 「Got ya!」 。

這種方式有點讓人摸不著頭腦，所以請仔細揣摩並敲代碼實踐一下，直至完全理解。

你可能會寫出來更好的 radio 和 checkbox 受控組件，但是如果你真的想要用 `ref` ，那麼接下來的兩部分會幫到你。

3、 Radio 標籤集合

不像 text 和 number 這類 input 元素，radio 元素是成組出現的。每組中的元素都有相同的 屬性，就像這樣：

在 「pet」 radio 標籤集合中有三個選項 —— 「cat」、「dog」 和 「ferret」。

由於我們關心的是整個集合的元素，所以給每個單選框設置 並不是一個好主意。遺憾的是，沒有 DOM 節點是包含了 radio 集合的。

可以通過下面的三步來檢索出 radio 集合的值：

1、在 標籤上設置 ref （下面的第20行）。

2、從 form 中取出這個 radio 集合。然後它應該是 集合（下面的第9行）。

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