在 React 中獲取輸入欄位的值

1. 在 React 中輸入如何工作
2. 在 React 16 中獲取輸入欄位的值
3. 使用鉤子獲取 React 中輸入欄位的值
4. 如何處理具有數十個輸入的大型表單

處理使用者輸入是開發動態 React 應用程式的關鍵之一。使用使用者輸入可以讓你響應他們的操作並提供卓越的使用者體驗。

在 React 中工作時，最好將使用者輸入儲存在狀態屬性中以建立單一的事實來源。這使你可以輕鬆地與資料互動並在必要時對其進行操作。

每當狀態發生變化時，React 會自動更新元件以反映最近的變化。

在 React 中輸入如何工作

在繼續之前，我們必須瞭解 React 決定重新渲染元件的時間和原因。

首先，當其內部狀態發生變化時，應用程式 UI 會更新（重新渲染）。任何使用者事件，例如選擇不同的選項或選中/取消選中某個欄位，都可以更改狀態並導致重新渲染。

其次，當從父級收到的元件 props 發生更改時，會發生重新渲染。在某些情況下，父元件從其狀態提供 prop 值。

React 使用 JSX，它看起來很像 HTML，但它的功能不同。

重要的是要記住，當你在 JSX 中建立一個 <input> 元素時，你不是在建立 HTML <input> 元素，而是一個與它非常相似的 React <input> 物件。它呈現類似於 HTML input 元素並模仿其事件處理介面，但在其他方面是獨立的。

React 應用程式由 UI 元素組成，這些元素從元件狀態中獲取它們的值。如前所述，更改輸入是更改狀態以及頁面上呈現的視覺元素的最常見方法之一。

然而，要記住的重要一點是，狀態是 React 應用程式中唯一的真實來源。UI 介面具有次要作用。

在 React 16 中獲取輸入欄位的值

自 React 16 釋出以來，開發人員可以使用可讀的類語法建立 React 類元件。請注意，你必須在建構函式中繫結它們或使用箭頭語法呼叫它們才能使事件處理程式工作，如下例所示。

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      enteredValue: ""
    }
  }
  render() {
    console.log(this.state.enteredValue)
    return <input type="text"
                  onChange={(event) => this.setState({enteredValue: event.target.value})}>
           </input>;
  }
}

一般來說，使用箭頭語法更具可讀性和方便性。它還使應用程式更易於除錯。

你可以自己檢視 playcode 並看到每當你（也就是使用者）在輸入欄位中輸入新內容時，狀態值都會更新，然後記錄到控制檯（用於演示目的）。

使用鉤子獲取 React 中輸入欄位的值

功能元件比類元件更容易編寫和閱讀。這種型別的元件只是一個接受 props 作為引數的函式。

直到幾年前，功能元件還被稱為無狀態或啞元件，主要用於視覺化資料。

自 React 16.8 以來，函式式元件獲得了許多新功能的訪問許可權，包括鉤子。現在開發人員可以使用 useState() 鉤子來維護功能元件中的狀態。

這個鉤子允許你獲取一個狀態變數和更新它的函式。你不必再直接在功能元件中使用 .setState() API。

如果使用功能元件構建相同的應用程式，它的外觀如下：

function App(props){
  let [inputValue, setInputValue] = useState("")
  console.log(inputValue)
  return <input type="text"
            onChange={(event) => setInputValue(event.target.value)}>
         </input>;
}

useState() 鉤子的工作方式非常簡單。一旦被呼叫，它就會返回一個分配給 inputValue 的狀態變數和一個更新它的函式。

從可讀性的角度來看，具有用於更新每個變數的獨特函式可能是有益的。正如我們所見，setInputValue 有一個相當具有描述性的名稱。

傳遞給 useState() 鉤子（空字串）的引數將用作 inputValue 狀態變數的初始值。

如你所見，這個定義更加清晰，並且與類元件一樣有效。當你需要一個只有幾個變數來儲存狀態值的元件時，函式式元件通常是更好的選擇。

儘管如此，在某些情況下，類元件是必要的，並且不同於功能元件。要了解有關差異的更多資訊，請閱讀 official react 文件。

如何處理具有數十個輸入的大型表單

正如我們之前提到的，每個 UI 輸入元素都需要一個狀態變數來儲存使用者輸入的值。表單有數十個甚至數百個輸入項並不罕見。你應該為它們建立一個單獨的狀態變數嗎？

解決方案簡單，符合 React 的整體邏輯。你不應將這些輸入放在一個大元件中，而應通過建立單獨的小元件將它們分解成邏輯連線的部分。

然後你可以匯入並使用它們來構建大型表單。這樣，較小的元件只負責儲存和維護一些輸入。

以這種方式構建的應用程式更具可讀性且更易於維護。其他處理你程式碼的開發人員會感謝你編寫簡單易懂的程式碼。