如何在 React 中獲取 event.target 的類名？

Question

我正在嘗試獲取單擊的用戶的 user.id，以便可以將其用作 fetch() 中的查詢參數。 但是，setClickedUserId 傳遞/分配給我的 clickedUserId state 的內容如下：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 object 中讀取信息，不如通過onClick在handleClickUser function 中傳遞您需要的信息。

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

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