新增事件處理常式和更新狀態

  • 5 分鐘

將狀態儲存在應用程式的核心元件 (App) 可讓我們讀取所有重要屬性的目前值。 我們不需要與每個元件互動。 我們也可以集中事件，以確保只在一個位置修改資料。

案例

我們想要讓應用程式的使用者在完成工作時，可在食材清單中點選項目。 我們會將項目標示為 prepared 狀態。 這種設定會反映在應用程式上。 當值變更時，元件會視需要偵測更新和重新評估。

新增點選事件的方法

  1. 開啟 App.jsx 檔案。

  2. 建立名為 ingredientClick 的事件接聽程式。 並新增至讀取的批註 TODO: Create ingredientClick event listener 下。

    function ingredientClick(index) {
    const updatedRecipe = { ... recipe };
    updatedRecipe.ingredients[index].prepared = !updatedRecipe.ingredients[index].prepared;
    setRecipe(updatedRecipe);
}

    邏輯一開始會使用散佈運算子來建立 recipe 的複本。 接著，我們會使用 index 來取得更新的 ingredient。 我們會反轉 prepared 的值。 最後，我們會使用 setRecipe 來取代狀態中的 recipe 物件。

  3. 新增 IngredientList，此元件會顯示食譜中的食材。 若要這麼做，在讀取的註解之下，新增下列程式碼：TODO: Pass ingredients and event listener to IngredientList。

    <IngredientList ingredients={recipe.ingredients} onClick={ ingredientClick } />

    請注意，我們可以傳遞 ingredientClick 函式，因為會將任何其他的元件傳遞至元件。

將 IngredientList 更新為使用事件接聽程式

在 React 中，屬性 (或 props) 可以是任何 JavaScript 類型，包括函式。 所以我們可以將事件處理常式設定為一種 prop。這種設定可讓我們集中處理事件。

讓我們更新 IngredientList 以使用稍早建立的 ingredientClick 函式：

  1. 開啟 IngredientList.jsx 檔案。 請注意現有的元件。 我們將使用此元件來示範如何使用事件。

  2. 在 TODO: Add onClick event 註解下方，新增下列 JSX。

    onClick={ () => props.onClick(index) }

    請注意，我們可以將參數傳遞至 prop onClick 函式。

    注意

    我們在元件的 props 上使用名稱 onClick 沒有特殊原因。 這只是我們選擇的名稱。 這個名稱是先前在 App.jsx 檔案中傳下來的。

測試頁面

  1. 儲存所有檔案。
  2. 返回瀏覽器並重新整理頁面。 如果您選取了食材，則必須變更行的狀態。 因為 prepared 屬性已更新，所以會隨之變更。