章節7

使用狀態添加互動性

讓我們來探索 React 如何透過狀態和事件處理器幫助我們新增互動性。

舉例來說，讓我們在您的 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 的函式。Hooks 允許您將額外的邏輯（例如狀態）添加到您的元件中。您可以將狀態視為 UI 中任何會隨時間變化的資訊，通常是由使用者互動觸發的。

Two different examples of state: 1. A toggle button that can be selected or unselected. 2. A like button that can be clicked multiple times.

您可以使用狀態來儲存並遞增使用者點擊「讚」按鈕的次數。事實上，用於管理狀態的 React Hook 稱為：useState()

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

index.html

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

陣列中的第一個項目是狀態值，您可以任意命名。建議將其命名為具有描述性的名稱。

index.html

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

陣列中的第二個項目是一個用於更新值的函式。您可以任意命名更新函式，但通常在其前面加上 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 文件中的新增互動性以及管理狀態章節。

其他資源

狀態：元件的記憶體

認識你的第一個 Hook

回應事件

使用狀態添加互動性

監聽事件

處理事件

狀態和 Hooks

管理狀態

您已完成本章7