在 Vue 中使用 v-model 來做表單輸入時非常好用，那麼在 React 中可以怎麼運用呢？本篇文章將會介紹該怎麼利用 Hook 來做類似的效果。

利用 useState 綁定數值

首先，先看一下完成的程式：

當輸入數字時，另一個顯示的欄位就會即時顯示輸入的數字，那麼就一步一步地來看是如何做出來的。

  1. 載入 useState 方法

    1
    const { useState } = React;

  2. 使用 useState 方法

    1
    2
    // [state, '改變 state 的方法'] = useState(預設值)
    const [inputNum, setInputNum] = useState(0);

  3. 定義事件處理器

    1
    2
    3
    4
    5
    // 在 React 中，一般會使用 handle 開頭命名事件處理器
    const handleInputNum = (e) => {
      const { value } = e.target; // 透過 e.target.value 取出輸入內容
      setInputNum(value); // 再經由 setInputNum 即時更新 inputNum 的 state
    };

  4. 在輸入欄位綁定 onChange 事件，並把 state 帶入 value

    1
    2
    3
    4
    5
    6
    <input
      type="number"
      onChange={handleInputNum}
      value={inputNum}
      min="0"
    />

  5. 讓顯示區域同步更新數值

    1
    <input type="number" value={inputNum} />

以上就是利用 useState 這個 hook 來運用表單的例子，當然也可以做其他的運用，例如在 value={inputNum * 2} 做乘 2 倍的運算。