如何知道從哪個 DOM 單擊事件被觸發

Question

我有幾個來自 Material UI 的Card組件，每個組件都包含一個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 元素，則它是您的click函數接收的事件對象的currentTarget屬性。

這是一個簡單的示例，顯示了Card及其父代的替代品，在這種情況下， Card組件返回您將其作為第二個參數傳遞給 click 函數的id ：

 "use strict"; const cards = Array.from(Array(5), (_, index) => ({ id: index + 1, value: `Card ${index + 1}` })); function Parent() { const click = (evt, id) => { console.log(`evt.currentTarget.tagName = ${evt.currentTarget.tagName}, id = ${id}`); }; return cards.map(({id, value}) => <Card key={id} value={value} onClick={evt => click(evt, id)} /> ); } function Card({value, onClick}) { 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({
  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>
  );
}