Javascript 如何知道从哪个DOM click事件被触发

我在material UI中有几个

卡片

组件，每个组件都包含一个

编辑

按钮，并且有一个可用的处理程序，它们是使用

映射

遍历动态添加的（例如，我刚刚硬编码了其中的两个）

现在，我试图在按钮点击中使卡片可编辑，但无法了解如何知道从哪个卡片触发事件，然后将该事件的“排版”编辑为“文本字段”

 <CardContent>
    <Typography>ID: '1'</Typography>
    <Typography
      className={classes.title}
      color="textSecondary"
      gutterBottom
    >
      Word of the Day
    </Typography>
    <Typography>Name: 'RAAM'</Typography>
    <Typography>Blood group: 'AB+'</Typography>
    <Typography>"Patient Ram is having bloodgroup AB+"</Typography>
  </CardContent>
  <CardActions>
    <Button size="small" onClick={click}>
      Edit
    </Button>
  </CardActions>
  <CardContent>

ID:'1'
今日风云
姓名：“RAAM”
血型：“AB+”
“患者公羊的血型为AB+”
编辑

下面是我的代码沙盒示例

---

通常的解决方案是让卡片传回一些识别信息或您传递给它的对象，因为您对React元素几乎无能为力

如果您想要DOM元素，那么它是

click

函数接收的事件对象的

currentTarget

属性

下面是一个简单的示例，显示了

卡

的代理及其父项，在本例中，

卡

组件返回

id

，您将其作为第二个参数传递给click函数：

“严格使用”；
常量卡=数组。从（数组（5），（\ux，索引）=>({
id:索引+1，
值：`Card${index+1}`
}));
函数父函数（）{
常量点击=（evt，id）=>{
log（`evt.currentTarget.tagName=${evt.currentTarget.tagName}，id=${id}`）；
};
返回卡.map（{id，value}）=>
单击（evt，id）}
/>
);
}
功能卡（{value，onClick}）{
返回{value}；
}
render（，document.getElementById（“根”））

导入React，{useRef}来自“React”；
从“@material ui/core/styles”导入{makeStyles}”；
从“@物料界面/核心/卡片”导入卡片；
从“@material ui/core/CardActions”导入CardActions；
从“@material ui/core/CardContent”导入CardContent；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Typography”导入排版；
const useStyles=makeStyles({
根目录：{
最小宽度：275
},
要点：{
显示：“内联块”，
边距：“0 2px”，
变换：“比例（0.8）”
},
标题：{
尺寸：14
},
pos:{
marginBottom:12
}
});
导出默认函数OutlinedCard（）{
const refs=useRef（[]）；
const classes=useStyles（）；
常量单击=（事件）=>{
const{currentTarget:{id=”“}={}}=event；
const clickedCard=refs.current[id]；//这是单击其按钮的卡
控制台日志（点击卡片）；
};
常量createRefs=（id，节点）=>（refs.current[id]=节点）；
返回(
{createRefs（'card_1'，node）}>
ID:'1'
今日风云
姓名：“RAAM”
血型：“AB+”
“患者公羊的血型为AB+”
编辑
{createRefs（'card_2'，node）}>
ID:'2'
今日风云
姓名：“RAAM”
血型：“AB+”
“患者公羊的血型为AB+”
编辑
);
}
你能在帖子中加入
点击
方法吗？@vsync它非常基本，所以没有在这里发布，尽管它可以在codesandbox链接中找到。你必须对每张卡都有一些标识符。。您需要将其传递给
单击
方法。然后，您应该相应地更新状态，然后对状态更改作出反应以更新DOM，使特定的卡可编辑。您知道如何使用react state吗<代码>使用状态
例如？为什么您的卡中有两张卡。。？这并不像这种方法更好：
onClick={click（id）}
和
const click=id=>e=>…
@vsync-它们各自独立。：-）最后他们做了同样的事情。她的代码中没有类。。。她使用功能性反应，因此-这没有帮助her@vsync好的，按照她的要求更新代码。ID是硬编码的，但它应该是动态的，以防她使用数组渲染卡。
import React, { useRef } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles({
  root: {
    minWidth: 275
  },
  bullet: {
    display: "inline-block",
    margin: "0 2px",
    transform: "scale(0.8)"
  },
  title: {
    fontSize: 14
  },
  pos: {
    marginBottom: 12
  }
});

export default function OutlinedCard() {
  const refs = useRef([]);
  const classes = useStyles();
  
  const click = (event) => {
    const { currentTarget: { id = "" } = {} } = event;
    const clickedCard = refs.current[id]; // This is the card whose button got clicked
    console.log(clickedCard);
  };

  const createRefs = (id, node) => (refs.current[id] = node);

  return (
    <Card className={classes.root} variant="outlined">
      <CardContent ref={(node) => {createRefs('card_1', node)}}>
        <Typography>ID: '1'</Typography>
        <Typography
          className={classes.title}
          color="textSecondary"
          gutterBottom
        >
          Word of the Day
        </Typography>
        <Typography>Name: 'RAAM'</Typography>
        <Typography>Blood group: 'AB+'</Typography>
        <Typography>"Patient Ram is having bloodgroup AB+"</Typography>
      </CardContent>
      <CardActions>
        <Button size="small" id="card_1" onClick={click}>
          Edit
        </Button>
      </CardActions>
      <CardContent ref={(node) => {createRefs('card_2', node)}}>
        <Typography>ID: '2'</Typography>
        <Typography
          className={classes.title}
          color="textSecondary"
          gutterBottom
        >
          Word of the Day
        </Typography>
        <Typography>Name: 'RAAM'</Typography>
        <Typography>Blood group: 'AB+'</Typography>
        <Typography>"Patient Ram is having bloodgroup AB+"</Typography>
      </CardContent>
      <CardActions>
        <Button size="small" id="card_2" onClick={click}>
          Edit
        </Button>
      </CardActions>
    </Card>
  );
}