React 的表單輸入運用

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

利用 useState 綁定數值

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

See the Pen <a href='https://codepen.io/bucky0112/pen/BazQBQr'>React 的表單輸入運用</a> by Bucky Chu (<a href='https://codepen.io/bucky0112'>@bucky0112</a>) on <a href='https://codepen.io'>CodePen</a>.

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

載入 useState 方法

   const { useState } = React;

使用 useState 方法

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

定義事件處理器

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

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

   <input
     type="number"
     onChange={handleInputNum}
     value={inputNum}
     min="0"
   />

讓顯示區域同步更新數值

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

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

利用 useState 綁定數值

Enjoyed this article?