【NEXT.JS 系列】從 JAVASCRIPT 到 REACT 7

使用 State 添加互動性

讓我們探索 React 如何藉由狀態和事件處理程序幫助我們添加互動性。

例如，讓我們在您的專案中創建一個”喜歡”按鈕。 首先，在您的程式碼中添加一個按鈕元素：

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 事件。

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

在 React 中，事件名稱是駝峰式（camelCased）的。 onClick 事件是您可以用來回應用戶互動的許多可能事件之一。 例如，您可以對輸入框使用 onChange 或對表單使用 onSubmit。

處理事件

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

function HomePage() {
  // ...

  function handleClick() {
    console.log("increment like count")
  }

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

然後，您可以在觸發 onClick 事件時調用 handleClick 函數：

function HomePage() {
  //    ...
  function handleClick() {
    console.log('increment like count');
  }

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

狀態與鉤子（State and Hooks）

React 有一組稱為鉤子的函數。 掛鉤允許您向元件添加額外的邏輯，例如 state。 您可以將 state 視為 UI 中隨時間變化的任何訊息，通常由用戶互動所觸發。

您可以使用 state 來儲存和增加用戶點擊喜歡按鈕的次數。 事實上，useState() 就是 React 管理狀態的鉤子

function HomePage() {
  React.useState();
}

useState() 返回一個陣列，您可以使用陣列解構存取和使用元件內的這些數組值：

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

  // ...
}

陣列中的第一項是狀態 value，您可以為其命名。 建議將其命名為描述性的：

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

  // ...
}

陣列中的第二項是 update 數值的函數。 您可以將更新函數命名為任何名稱，但通常使用 set 作為前綴，後面跟著欲更新的狀態變量的名稱：

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

  // ...
}

您還可以藉此機會添加您的 likes 狀態的初始值：零。

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

然後，您可以使用元件內的狀態變量檢查初始狀態是否正常。

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

  return (
    // ...
    <button onClick={handleClick}>Like({likes})</button>
  );
}

最後，您可以在之前定義的 handleClick() 函數中調用狀態更新器函數 setLikes：

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

  function handleClick() {
    setLikes(likes + 1)
  }}

  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Likes ({likes})</button>
    </div>
  )
}

點擊按鈕現在將呼叫 handleClick 函數，該函數使用當前點讚數 + 1 作為單個參數，呼叫 setLikes 狀態更新器函數。

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

管理 State

以上只是對狀態的簡單介紹，關於在 React 應用程式中管理狀態和數據流的內容還有很多。 若要了解更多資訊，我們建議您閱讀 React 說明文件中的添加互動性和管理狀態部分。

在下一節中我們將提供您繼續學習 React 的更多方向與資源。