首頁猿問如何知道從哪個DOM點擊事件被觸發

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

JavaScript

jeck貓 2023-04-01 16:13:06

我有幾個Card來自 Material UI 的組件，每個組件都包含一個EDIT按鈕，并且有一個可用的處理程序，它們是使用Map遍歷動態添加的（例如，我剛剛對其中兩個進行了硬編碼）?，F在，我試圖在單擊按鈕時使卡片可編輯，但無法找出如何了解從哪個卡片觸發事件，然后將可編輯的“排版”設置為“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

查看完整描述

2 回答

拉丁的傳說

TA貢獻1789條經驗獲得超8個贊

通常的解決方案是讓卡片傳回一些識別信息或您傳遞給它的對象，因為您對 React 元素幾乎無能為力。

如果您想要 DOM 元素，它是currentTarget您的函數接收的事件對象的屬性click。

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

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

反對回復 2023-04-01

鳳凰求蠱

TA貢獻1825條經驗獲得超4個贊

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 (

<CardContent ref={(node) => {createRefs('card_1', node)}}>

<Typography

className={classes.title}

color="textSecondary"

gutterBottom

Word of the Day

</Typography>

<Typography>Blood group: 'AB+'</Typography>

<Typography>"Patient Ram is having bloodgroup AB+"</Typography>

</CardContent>

Edit

</Button>

</CardActions>

<CardContent ref={(node) => {createRefs('card_2', node)}}>

<Typography

className={classes.title}

color="textSecondary"

gutterBottom

Word of the Day

</Typography>

<Typography>Blood group: 'AB+'</Typography>

<Typography>"Patient Ram is having bloodgroup AB+"</Typography>

</CardContent>

Edit

</Button>

</CardActions>

</Card>

);

}

反對回復 2023-04-01

2 回答
0 關注
144 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

2 回答

添加回答