onClick 使用地图加载每个实例
P粉478188786
P粉478188786 2024-03-31 00:18:17
0
1
457

loading 正在被设置并传递到 props 中,但是当在任何按钮上按下 onClick 时,加载程序会在 item 的所有实例上触发。如何让加载程序仅在按下的按钮上运行?

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

P粉478188786
P粉478188786

全部回复(1)
P粉191610580

您必须使用 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) => ( ))}
); }

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板