Event handling

在PHP(或傳統的web)裡，是透用Form以及http post，在submit後，送出Form裡的欄位內容給伺服器。在javascript裡，可以利用document.getElementById取得DOM的內容，再利用http post將資料送到伺服器。未來，在介紹Firebase時，我們會介紹如何將資料送到伺服器。

在react裡，並不建議直接去取得DOM的內容，所以，寫法就跟javascript不一樣了。在react裡，則是在輸入時(onChange)就將內容放到state裡，並將value設為state。(詳參:Responding to Events)

Input (text、number)

• <input>

我們在productList.tsx下，新增兩個輸入框:

    產品描述:<input type="text" name="desc" value={desc} onChange={handleClickDesc}/><br/>
    產品價格:<input type="number" name="price" value={price} onChange={handleClickPrice}/><br/>

e是onChange預設傳給被呼叫方法的第一個參數，可以改為任何的變數名稱。可以利用console.log(e.target)，就可以看到是取得DOM的元件，再從e.target中取得value，將value放到state裡。

<aside> 📢 因為price是數字，要記得利用Number()將輸入內容轉成數字。

</aside>

  const [desc, setDesc] = useState("");
  const [price, setPrice] = useState(0);

  function handleClickDesc(e) {
    setDesc(e.target.value);
  }
  function handleClickPrice(e) {
    setPrice(Number(e.target.value));
  }

因為我們使用typescript，所以要定義e的資料型態:

  function handleClickDesc(e: React.ChangeEvent<HTMLInputElement>) {
    setDesc(e.target.value);
  }
  function handleClickPrice(e: React.ChangeEvent<HTMLInputElement>) {
    setPrice(Number(e.target.value));
  }

利用useState()，管理desc及price。

<aside> 📢 如果不用useState()，在畫面上就看不到輸入的內容。

</aside>

接下來，加個按鈕，在點擊按鈕時，就可以呼叫update函數，將輸入內容加到產品清單陣列中。

<button onClick={update}>新增</button>

在update函數中將內容加到陣列中:

  function update() {
    products.push({ desc, price })
  }