如何在 React 中获取 event.target 的类名？

Question

我正在尝试获取我单击的用户的 user.id，以便可以将其用作 fetch() 中的查询参数。但是，setClickedUserId 传递/分配给我的 clickedUserId 状态的内容如下：MuiButtonBase-root%20MuiListItem-root%201%20MuiListItem-gutters%20MuiListItem-button
----我的代码：

import React from 'react';
import {makeStyles} from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Collapse from '@material-ui/core/Collapse';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import PersonIcon from '@material-ui/icons/Person';
import AddBoxOutlinedIcon from '@material-ui/icons/AddBoxOutlined';

// Global context
import globalContext from './globalContext';

const useStyles = makeStyles((theme) => ({
  root: {
    marginTop: theme.spacing(-2.0),
    width: '100%',
    maxWidth: 360,
    backgroundColor: '#3F0E40',
    color: 'white',
  },
  nested: {
    marginLeft: theme.spacing(-3.5),
  },
  nestedAdd: {
    marginLeft: theme.spacing(3.5),
  },
  nestedAddText: {
    marginLeft: theme.spacing(0.5),
  },
}));

/**
 *@return{any} nestedList
 */
export default function DmsList() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(true);
  console.log('I am inside DmsList!!');
  // Global Context
  const {setMobileOpen} = React.useContext(globalContext);
  const {currentDmdWith} = React.useContext(globalContext);
  const {setChannel} = React.useContext(globalContext);
  const {clickedDms, setClickedDms} = React.useContext(globalContext);
  const {setClickedUserId} = React.useContext(globalContext);

  const handleClickUser = (event) => {
    setMobileOpen(false);
      setClickedDms('true');
      setChannel(event.target.innerText);
      setClickedUserId(event.target.className);
      console.log(clickedDms);
  };

  const handleClickAdd = () => {
    setMobileOpen(false);
  };

  const handleClick = () => {
    setOpen(!open);
  };

  return (
    <List
      component="nav"
      aria-labelledby="nested-list-subheader"
      className={classes.root}
    >
      <ListItem button
        onClick={handleClick}>
        {open ? <ExpandLess /> : <ExpandMore />}
        <ListItemText primary="Direct Messages" />
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <List component="div" disablePadding className={classes.nested}>
          {currentDmdWith.map((user) => (
            <ListItem button className={user.id} onClick={handleClickUser}>
              <ListItemIcon className={user.id}>
              </ListItemIcon>
              <PersonIcon className={user.id} color='white'/>
              <ListItemText className={user.id} primary={user.name} />
            </ListItem>
          ))}
          <ListItem button
            onClick={handleClickAdd}
            className={classes.nested}>
            <ListItemIcon>
            </ListItemIcon>
            <AddBoxOutlinedIcon className={classes.nestedAdd}/>
            <ListItemText
              className={classes.nestedAddText} primary="Add Teammate" />
          </ListItem>
        </List>
      </Collapse>
    </List>
  );
}

我会使用 event.target.id，因为它实际上获取了 div 的 id，而不是一堆胡言乱语，但是当我将 id = {user.id} 放入 ListItem 时，我必须单击一个非常具体的点，最左边，因为如果我点击一个人物图标或带有文本的区域，event.target.id 会被分配一个空白，并使我的 fetch() 返回 404 错误。

Answer 1

不要尝试从Event 对象中读取信息，而是通过onClick 属性在handleClickUser 函数中传递您需要的信息。

<ListItem 
  button 
  className={user.id} 
  onClick={() => handleClickUser(user.id)}
>

const handleClickUser = (userId) => {
  setClickedUserId(userId);
};