onClick 使用地圖載入每個實例

Question

loading 正在設定並傳遞到props 中，但是當在任何按鈕上按下onClick 時，載入器會在item 的所有實例上觸發。如何讓載入程式僅在按下的按鈕上運行？

List.map((item, i) => {
  return(
<Button onClick={(e) => !props.loading && e.stopPropagation()}>
  Save {props.loading && (<CircularProgress/>)}
</Button>
  );
});

Answer 1

您必須使用 Id 陣列來呈現每個按鈕中的加載，而不是在父元件中載入布林變數。這是一個例子： 您可以在程式碼沙箱中檢查此程式碼 在這裡。

import "./styles.css";
import CircularProgress from "@mui/material/CircularProgress";
import { useState } from "react";

const items = ["1", "2", "3", "4", "5", "6"];

export default function App() {
  const [loading, setLoading] = useState([]);

  return (
    

      {items.map((item) => (
         {
            setLoading([...loading, e.target.id]);
          }}
        >
          {loading.includes(item) ?  : item}
        
      ))}
    
  );
}

這是我實作的一個簡單範例。如果使用者點擊某個按鈕，則只有該按鈕才會呈現載入微調器。您可以透過多種方式實現它。如果使用者點擊載入按鈕，您也可以新增邏輯以透過檢查狀態中是否存在該項目來刪除載入。如果是，您只需將其從載入清單中刪除即可。