事件

html可以透過事件去啟動javascript，注意，因為是JSX，所以，不需要也不能使用<script></script>，而是直接寫javascript。另外，要使用onClick，而不是onclick。

export default function LOGIN() {
  function login(){
    if (userID == "test" && password =="password"){
      alert("登入成功");
    }
    else {
      alert("登入失敗");
    }
  }
  return (
    <div>
    <h1>登入你的輔大 Go Go 帳戶 :)</h1>
    <p>
      <label>學號:<input type="text" name="userID" maxLength="9" size="9" placeholder="請輸入學號"></input>@mail.fju.edu.tw</label><br/>
      <label>密碼:</label><input type="password" name="password" placeholder="請輸入密碼"></input><br/>
      <input type="submit" value="登入" onClick={login}/>
    </p>
  </div>
  )
}

執行時會發現在javascript裡無法直接取得輸入的內容

Untitled

因為在javascript裡是必須透過document.getElementById()，去取得html的內容。不過，在react裡，並不鼓勵這樣的做法。

export default function LOGIN() {
  function login(){
    let userID = document.getElementById("userID").value;
    let password = document.getElementById("password").value;
    if (userID == "test" && password =="password"){
      alert("登入成功");
    }
    else {
      alert("登入失敗");
    }
  }
  return (
    <div>
    <h1>登入你的輔大 Go Go 帳戶 :)</h1>
    <p>
      <label>學號:<input id ="userID" type="text" name="userID" maxLength="9" size="9" placeholder="請輸入學號"></input>@mail.fju.edu.tw</label><br/>
      <label>密碼:</label><input id ="password" type="password" name="password" placeholder="請輸入密碼"></input><br/>
      <input type="submit" value="登入" onClick={login}/>
    </p>
  </div>
  )
}

在react裡，標準的作法是當使用者輸入時，透過onChange去將輸入內容儲存在javascript的變數裡。

export default function LOGIN() {
  let userID = "";
  let password = "";
  function onChangeId(event){
    userID = event.target.value;
  }
  function onChangePassword(event){
    password = event.target.value;
  }

  function login(){
    if (userID == "test" && password =="password"){
      alert("登入成功");
    }
    else {
      alert("登入失敗");
    }
  }
  return (
    <div>
    <h1>登入你的輔大 Go Go 帳戶 :)</h1>
    <p>
      <label>學號:<input id ="userID" type="text" name="userID" maxLength="9" size="9" placeholder="請輸入學號" onChange={onChangeId}></input>@mail.fju.edu.tw</label><br/>
      <label>密碼:</label><input id ="password" type="password" name="password" placeholder="請輸入密碼" onChange={onChangePassword}></input><br/>
      <input type="submit" value="登入" onClick={login}/>
    </p>
  </div>
  )
}

如果我們不想使用alert，而是想把訊息放在頁面上，就可以把訊息放在變數裡，再將變數放在頁面中

export default function LOGIN() {
  let userID = "";
  let password = "";
  **let message = "";**
  function onChangeId(event){
    userID = event.target.value;
  }
  function onChangePassword(event){
    password = event.target.value;
  }

  function login(){
    if (userID == "test" && password =="password"){
      **message = "登入成功";**
    }
    else {
      **message = "登入失敗";**
    }
  }
  return (
    <div>
    <h1>登入你的輔大 Go Go 帳戶 :)</h1>
    <p>
      <label>學號:<input id ="userID" type="text" name="userID" maxLength="9" size="9" placeholder="請輸入學號" onChange={onChangeId}></input>@mail.fju.edu.tw</label><br/>
      <label>密碼:</label><input id ="password" type="password" name="password" placeholder="請輸入密碼" onChange={onChangePassword}></input><br/>
      <input type="submit" value="登入" onClick={login}/>
      **{message}**
    </p>
  </div>
  )
}

可是，怎麼沒看到內容呢??? 簡單的說，在react裡，可以將變數顯示在畫面上，然而，當變數內容更新時，網頁並沒有更新，所以，是看不到新的內容的。

useState()

在react裡，state是個比較不容易理解的概念，簡單的說，在react裡，可以將變數顯示在畫面上，然而，當變數內容更新時，是看不到新的內容，所以，在react裡，提供了一種特別的state變數，當這些變數內容更新時，會去啟動畫面更新 (rerendenr)。

react裡，提供了一個useState()的函數 (稱之為hook)，讓我們來定義、取用state變數。要注意，取用時直接用變數，但是，更動時要使用對應的set函數 (如:setMessage)，才能有效更動變數，事實上，set函數會去去啟動畫面更新。

**import { useState } from "react";**
export default function LOGIN() {
  let userID = "";
  let password = "";
  **const [message, setMessage] = useState("");**
  function onChangeId(event){
    userID = event.target.value;
  }
  function onChangePassword(event){
    password = event.target.value;
  }

  function login(){
    if (userID == "test" && password =="password"){
      **setMessage("登入成功");**
    }
    else {
      **setMessage("登入失敗");**
    }
  }
  return (
    <div>
    <h1>登入你的輔大 Go Go 帳戶 :)</h1>
    <p>
      <label>學號:<input id ="userID" type="text" name="userID" maxLength="9" size="9" placeholder="請輸入學號" onChange={onChangeId}></input>@mail.fju.edu.tw</label><br/>
      <label>密碼:</label><input id ="password" type="password" name="password" placeholder="請輸入密碼" onChange={onChangePassword}></input><br/>
      <input type="submit" value="登入" onClick={login}/>
      {message}
    </p>
  </div>
  )
}

樣式設定

要如何動態設定樣式? 在react裡，可以透過useState去儲存變數的值，然而，在JSX裡不能寫if，所以，必須利用「?:」進行條件判斷，透過這樣來設定不同的樣式。