[Day 65] [React] Event Handling - 表單（註冊、登入、送出按鈕）[1]

14th鐵人賽

wscindy

2022-11-15 18:28:34

969 瀏覽

分享至

昨天 [Day 64] [React] Event Handling 的課程是關於針對幾種 events 出現時的 React 應對，主要是用 onClick 來解說 event handling 是什麼、有什麼方式可以設定 handling。而如何決定處理事件的方式包含透過 hooks 的帶入，也有用 Ternary / AND operator 的條件渲染。

今天會針對表單裡面的 event 來解說特別在表單裡的事件處理。

Hooks 筆記：

Conditional Render 筆記：

在做 web app 時，很容易會遇到登入、註冊、聯繫我們的表單，所以必須真正了解表單是如何運作的，也需要結合有關設置狀態和使用狀態的方法。

所以在這一課會介紹如何從 input element 取得用戶的輸入，以及如何使用 submit button 來獲取用戶輸入表單的內容。

onClick 是監聽是否被點擊，而監聽用戶在輸入內容時的功能叫 onChange。

function App() {

  function handleChange(){
    console.log('input')
  }

  return (
    <div className="container">
      <h1>Hello </h1>
      <input onChange={handleChange} type="text" placeholder="What's your name?" />
      <button>Submit</button>
    </div>
  );
}

onChange 加入 h1，當用戶輸入文字在框框裡，就會 console.log "input"。

除了可以看 value，也可以看 imput 的 placeholder & type：

  function handleChange(){
    var inputResult = event.target.value
    var inputResultPlace = event.target.placeholder
    var inputResultType = event.target.type
    console.log(inputResultType)
  }

也可以用 useState 來讓輸入的文字渲染到網頁上。下面是當用戶輸入文字，Hello 後面就會緊接著動態顯示用戶輸入的文字：

function App() {

  const [name, setName] = useState("");

  function handleChange(){
    console.log(event.target.value)
    setName(event.target.value)
  }

  return (
    <div className="container">
      <h1>Hello {name}</h1>
      <input onChange={handleChange} type="text" placeholder="What's your name?" />
      <button>Submit</button>
    </div>
  );
}

Controlled Component

課程中有提到 Controlled Component 這個專有名詞，但是並沒有解釋太多，所以我上網 Goo 了一下，找到其他人鐵人賽的文章內容：

[Day 27 - 即時天氣] React 中的表單處理（Controlled vs Uncontrolled）以及 useRef 的使用：

在 React 中表單元素的處理主要可以分成兩種 Controlled 和 Uncontrolled 這兩種，這裡關於 Controlled 和 Uncontrolled 指的是「資料受不受到 React 所控制」，也就是「受 React 所控制的資料（Controlled）」或「不受 React 所控制的資料（Uncontrolled）」。

之所以在表單元素上會區分「受 React 控制的資料」和「不受 React 控制的資料」，主要是因為在瀏覽器中，像是 <input /> 這類的表單元素本身就可以保有自己的資料狀態，這也就是爲什麼當我們在 <input /> 中輸入文字後，可以直接透過 JavaScript 選到該 input 元素後，再取出該元素的值，因為使用者輸入的內容（資料）可以直接保存在 <input /> 元素內。

以下面程式碼舉例來說：

我們可以透過 document.querySelector 選到該表單元素
透過該元素的 value 屬性，就可以知道該 <input /> 欄位中填入的值為何

<input type="text" id="name"/>

<script>
  const inputName = document.querySelector("#name");
  inputName.addEventListener("input", e => console.log(e.target.value));
</script>
但到了 React 時，React 就可以幫我們處理資料狀態，我們可以把表單內使用者輸入的資料交給 React，在使用者輸入資料的同時驗證使用者輸入內容的有效性，並做瀏覽器畫面的更新（例如，輸入的內容有誤時跳出提示訊息）。

所以回到課程裡的 <input /> 會提到 Controlled Component，是因為 value={name}。這邊的 name 的內容會隨著使用者輸入的內容而有改變，而透過該元素 value 屬性 (property) 就知道該 <input /> 欄位中填入的值為何：


const [name, setName] = useState("");

  function handleChange(){
    console.log(event.target.value)
    setName(event.target.value)
  }

.......

    <div className="container">
      <h1>Hello {name}</h1>


      <input 
        onChange={handleChange}
        type="text"
        placeholder="What's your name?"
        value={name}
      />

      
      <button>Submit</button>
    </div>