onClick memuatkan setiap kejadian menggunakan peta

Question

Dipecat pada semua kejadian

loading 正在被设置并传递到 props 中，但是当在任何按钮上按下 onClick 时，加载程序会在 item. Bagaimanakah saya boleh membuat pemuat berjalan hanya pada butang yang ditekan?

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

Answer 1

Anda perlu menggunakan tatasusunan Id untuk memaparkan pemuatan dalam setiap butang dan bukannya memuatkan pembolehubah boolean dalam komponen induk. Berikut adalah contoh: Anda boleh menyemak kod ini dalam kotak pasir kod di sini.

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}
        
      ))}
    
  );
}

Ini adalah contoh mudah pelaksanaan saya. Jika pengguna mengklik butang, hanya butang itu akan menyebabkan pemutar pemuatan. Anda boleh mencapai ini dalam pelbagai cara. Anda juga boleh menambah logik untuk mengalih keluar beban jika pengguna mengklik butang muat dengan menyemak sama ada item itu wujud dalam keadaan. Jika ya, anda boleh mengalih keluarnya daripada senarai beban.