onClick lädt jede Instanz mithilfe einer Karte

Question

Wird auf alle Instanzen von

loading 正在被设置并传递到 props 中，但是当在任何按钮上按下 onClick 时，加载程序会在 item abgefeuert. Wie kann ich dafür sorgen, dass der Lader nur bei gedrückten Tasten läuft?

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

这是我实现的一个简单示例。如果用户单击某个按钮，则只有该按钮才会呈现加载微调器。您可以通过多种方式实现它。如果用户单击加载按钮，您还可以添加逻辑以通过检查状态中是否存在该项目来删除加载。如果是，您只需将其从加载列表中删除即可。