ReactJS

Question

我的 React 代码中的 getAttribute() 有问题。

const handleChange = (event) => {
        let selectM = event.target.getAttribute("data-minister_name");
        console.log(selectM);
    };

<List dense sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
                        {listMiniters.map((c) => (
                            <ListItem
                                key={c.label}
                                disablePadding
                                onClick={handleChange}
                                data-minister_name="{c.label}"
                            >
                                <ListItemButton>
                                    <ListItemAvatar>
                                        <Avatar
                                            alt={`Avatar n°${c.label + 1}`}
                                            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
                                        />
                                    </ListItemAvatar>
                                    <ListItemText id={c.label} primary={`Line item ${c.label + 1}`} />
                                </ListItemButton>
                            </ListItem>
                        ))}
                    </List>

它return给我的

null

我不明白问题出在哪里...？你能帮我吗？

我正在使用 MUI。

Answer 1

请尝试在您的属性名称中不使用 '_'。

或者尝试使用 e.target.attributes.getNamedItem("aatribute-name").value;

Answer 2

event.target 将是实际单击的元素，不一定与事件处理程序绑定到的元素相同。

ListItem 有许多后代元素，它们将拦截点击并成为 event.target。

Use event.currentTarget instead.

ReactJS - getAttribute return 空

ReactJS - getAttribute return null

material-ui