React 基礎：使用狀態 (State) 增加互動性

讓我們探索 React 如何幫助我們使用狀態 (state) 和事件處理器 (event handlers) 來增加互動性。

舉例來說，讓我們在 HomePage 組件中建立一個「讚」按鈕。首先，在 return() 語句內添加一個按鈕元素：

index.html

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <button>Like</button>
    </div>
  );
}

監聽事件

要讓按鈕在被點擊時執行某些操作，你可以使用 onClick 事件：

index.html

function HomePage() {
  // ...
  return (
    <div>
      {/* ... */}
      <button onClick={}>Like</button>
    </div>
  );
}

在 React 中，事件名稱採用駝峰式命名。onClick 事件是眾多可用於響應用戶互動的事件之一。例如，你可以使用 onChange 來處理輸入欄位，或使用 onSubmit 來處理表單。

處理事件

你可以定義一個函數來「處理」事件觸發時的操作。在 return 語句之前建立一個名為 handleClick() 的函數：

index.html

function HomePage() {
  // ...
 
  function handleClick() {
    console.log("increment like count")
  }
 
  return (
    <div>
      {/* ... */}
	  <button onClick={}>Like</button>
    </div>
     )
   }

接著，你可以在 onClick 事件觸發時調用 handleClick 函數：

index.html

function HomePage() {
  // 	...
  function handleClick() {
    console.log('increment like count');
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Like</button>
    </div>
  );
}

嘗試在瀏覽器中運行這段程式碼。注意開發者工具中的日誌輸出是如何增加的。

狀態與鉤子 (Hooks)

React 提供了一組稱為鉤子 (hooks) 的函數。鉤子允許你為組件添加額外的邏輯，例如狀態 (state)。你可以將狀態視為 UI 中隨時間變化的任何資訊，通常由用戶互動觸發。

你可以使用_狀態_來儲存和增加用戶點擊「讚」按鈕的次數。事實上，React 中用於管理狀態的鉤子稱為：useState()

將 useState() 添加到你的專案中。它會返回一個陣列，你可以使用陣列解構 (array destructuring) 在組件內存取和使用這些陣列值：

index.html

function HomePage() {
  // ...
  const [] = React.useState();
 
  // ...
}

陣列中的第一個項目是狀態的 value，你可以為它命名任何名稱。建議為它取一個描述性的名稱：

index.html

function HomePage() {
  // ...
  const [likes] = React.useState();
 
  // ...
}

陣列中的第二個項目是一個用於 update 值的函數。你可以為更新函數命名任何名稱，但通常會以 set 為前綴，後面加上你要更新的狀態變數名稱：

index.html

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState();
 
  // ...
}

你還可以藉此機會將 likes 狀態的初始值設為 0：

index.html

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
}

接著，你可以通過在組件中使用狀態變數來檢查初始狀態是否正常工作。

index.html

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
  // ...
 
  return (
    // ...
    <button onClick={handleClick}>Like({likes})</button>
  );
}

最後，你可以在 HomePage 組件中調用狀態更新函數 setLikes，讓我們將它添加到之前定義的 handleClick() 函數中：

index.html

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Likes ({likes})</button>
    </div>
  );
}

現在，點擊按鈕將調用 handleClick 函數，該函數會以當前讚數 +1 作為參數調用 setLikes 狀態更新函數。

注意：與作為組件第一個函數參數傳遞的 props 不同，狀態是在組件內初始化和儲存的。你可以將狀態資訊作為 props 傳遞給子組件，但更新狀態的邏輯應保留在最初建立狀態的組件中。

管理狀態

這只是狀態的入門介紹，關於如何在 React 應用程式中管理狀態和數據流，還有更多內容可以學習。要了解更多，我們建議你閱讀 React 文檔中的添加互動性和管理狀態部分。

延伸閱讀資源：

狀態：組件的記憶

認識你的第一個鉤子

響應事件

使用狀態 (State) 增加互動性

監聽事件

處理事件

狀態與鉤子 (Hooks)

管理狀態

On this page