如何知道从哪个DOM点击事件被触发

Question

我有几个Card来自 Material UI 的组件，每个组件都包含一个EDIT按钮，并且有一个可用的处理程序，它们是使用Map遍历动态添加的（例如，我刚刚对其中两个进行了硬编码）。

现在，我试图在单击按钮时使卡片可编辑，但无法找出如何了解从哪个卡片触发事件，然后将可编辑的“排版”设置为“TextField”。

 <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>

这是我的 codeSandbox 示例 CodeSandbox

Answer 1

通常的解决方案是让卡片传回一些识别信息或您传递给它的对象，因为您对 React 元素几乎无能为力。如果您想要 DOM 元素，它是currentTarget您的函数接收的事件对象的属性click。这是一个简单的示例，显示了 for 及其父级的替代品Card，在这种情况下，Card组件返回您id将其作为第二个参数传递给 click 函数："use strict";const cards = Array.from(Array(5), (_, index) => ({&nbsp; &nbsp; id: index + 1,&nbsp; &nbsp; value: `Card ${index + 1}`}));function Parent() {&nbsp; &nbsp; const click = (evt, id) => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(`evt.currentTarget.tagName = ${evt.currentTarget.tagName}, id = ${id}`);&nbsp; &nbsp; };&nbsp; &nbsp; return cards.map(({id, value}) =>&nbsp; &nbsp; &nbsp; &nbsp; <Card&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={value}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={evt => click(evt, id)}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; );}function Card({value, onClick}) {&nbsp; &nbsp; return <div onClick={onClick}>{value}</div>;}ReactDOM.render(<Parent />, document.getElementById("root"));<div id="root"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>

Answer 2

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({&nbsp; root: {&nbsp; &nbsp; minWidth: 275&nbsp; },&nbsp; bullet: {&nbsp; &nbsp; display: "inline-block",&nbsp; &nbsp; margin: "0 2px",&nbsp; &nbsp; transform: "scale(0.8)"&nbsp; },&nbsp; title: {&nbsp; &nbsp; fontSize: 14&nbsp; },&nbsp; pos: {&nbsp; &nbsp; marginBottom: 12&nbsp; }});export default function OutlinedCard() {&nbsp; const refs = useRef([]);&nbsp; const classes = useStyles();&nbsp;&nbsp;&nbsp; const click = (event) => {&nbsp; &nbsp; const { currentTarget: { id = "" } = {} } = event;&nbsp; &nbsp; const clickedCard = refs.current[id]; // This is the card whose button got clicked&nbsp; &nbsp; console.log(clickedCard);&nbsp; };&nbsp; const createRefs = (id, node) => (refs.current[id] = node);&nbsp; return (&nbsp; &nbsp; <Card className={classes.root} variant="outlined">&nbsp; &nbsp; &nbsp; <CardContent ref={(node) => {createRefs('card_1', node)}}>&nbsp; &nbsp; &nbsp; &nbsp; <Typography>ID: '1'</Typography>&nbsp; &nbsp; &nbsp; &nbsp; <Typography&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className={classes.title}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color="textSecondary"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; gutterBottom&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Word of the Day&nbsp; &nbsp; &nbsp; &nbsp; </Typography>&nbsp; &nbsp; &nbsp; &nbsp; <Typography>Name: 'RAAM'</Typography>&nbsp; &nbsp; &nbsp; &nbsp; <Typography>Blood group: 'AB+'</Typography>&nbsp; &nbsp; &nbsp; &nbsp; <Typography>"Patient Ram is having bloodgroup AB+"</Typography>&nbsp; &nbsp; &nbsp; </CardContent>&nbsp; &nbsp; &nbsp; <CardActions>&nbsp; &nbsp; &nbsp; &nbsp; <Button size="small" id="card_1" onClick={click}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Edit&nbsp; &nbsp; &nbsp; &nbsp; </Button>&nbsp; &nbsp; &nbsp; </CardActions>&nbsp; &nbsp; &nbsp; <CardContent ref={(node) => {createRefs('card_2', node)}}>&nbsp; &nbsp; &nbsp; &nbsp; <Typography>ID: '2'</Typography>&nbsp; &nbsp; &nbsp; &nbsp; <Typography&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className={classes.title}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color="textSecondary"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; gutterBottom&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Word of the Day&nbsp; &nbsp; &nbsp; &nbsp; </Typography>&nbsp; &nbsp; &nbsp; &nbsp; <Typography>Name: 'RAAM'</Typography>&nbsp; &nbsp; &nbsp; &nbsp; <Typography>Blood group: 'AB+'</Typography>&nbsp; &nbsp; &nbsp; &nbsp; <Typography>"Patient Ram is having bloodgroup AB+"</Typography>&nbsp; &nbsp; &nbsp; </CardContent>&nbsp; &nbsp; &nbsp; <CardActions>&nbsp; &nbsp; &nbsp; &nbsp; <Button size="small" id="card_2" onClick={click}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Edit&nbsp; &nbsp; &nbsp; &nbsp; </Button>&nbsp; &nbsp; &nbsp; </CardActions>&nbsp; &nbsp; </Card>&nbsp; );}