onClick事件异常：有时可获取e.target.id有时无法获取的问题排查

问题描述 #

处理onClick事件时遇到异常：一组用户卡片，点击时希望通过navigate("/farmershop/" + e.target.id)跳转到对应用户页面，但仅点击特定区域（如图片附近空白处）能打印出e.target.id，点击文字等区域时得到空字符串。

相关代码：

const handle_clicked_farmer = (e) => {
    console.log(e.target.id);
    navigate("/farmershop/" + e.target.id);
}

const createTopFarmers = () => {
    return top_n_farmers.map((farmer) => ( // on click take to farmer's page.
      <Stack  sx={{marginTop: "3%", background: "green", marginLeft:"5%", width: "400px", borderRadius:"5px", boxShadow: "2px 3px 8px black"}}>
        
        <Box sx={{marginLeft:"2%", cursor: "pointer" }} onClick={handle_clicked_farmer} id={farmer.id}>
          <Typography  sx={{fontFamily: "Amatic SC", letterSpacing: "2px", fontSize: "50px", fontWeight: 700}}>{farmer.firstname}</Typography>
          <Typography  sx={{fontFamily: "Amatic SC", letterSpacing: "2px", fontSize: "50px", fontWeight: 700, marginTop: "-5%"}}>{farmer.lastname}</Typography>
          <img src={farmer.img} style={{width: "100px", borderRadius: "300px", border: "2px solid black"}}/>
          <Typography  sx={{fontFamily: "Amatic SC", letterSpacing: "2px", fontSize: "20px", fontWeight: 700, marginTop: "-5%"}}>location: {farmer.location}</Typography>
        </Box>
        
        <Box>
          {farmer.likes} likes
        </Box>
        <Box  sx={{backgroundColor: "green"}}>
          <Typography  sx={{fontFamily: "Amatic SC", fontSize: "25px"}}>{farmer.about}</Typography>
        </Box>
      </Stack>
    ));
};

原因分析 #

• e.target指向的是实际被点击的DOM元素，你把id={farmer.id}设置在了外层<Box>上，但点击内部的<Typography>、文本节点时，e.target是这些子元素——它们并没有设置id属性，所以e.target.id返回空字符串。
• 你提到点击图片能获取id，实际是点击到了<Box>的空白区域（而非图片本身），此时e.target才是带id的<Box>元素，所以能拿到正确值。

解决方法 #

方法1：用e.currentTarget替代e.target #

e.currentTarget始终指向绑定了事件处理函数的元素（也就是带id的<Box>），无论点击它的哪个子元素，都能正确拿到id：

const handle_clicked_farmer = (e) => {
    console.log(e.currentTarget.id);
    navigate("/farmershop/" + e.currentTarget.id);
}

方法2：直接传递farmer.id到事件处理函数 #

不需要依赖事件对象，直接把id作为参数传入，逻辑更清晰可靠：

const handle_clicked_farmer = (farmerId) => {
    console.log(farmerId);
    navigate("/farmershop/" + farmerId);
}

// 渲染时修改onClick调用方式
<Box sx={{marginLeft:"2%", cursor: "pointer" }} onClick={() => handle_clicked_farmer(farmer.id)}>

方法3：给所有子元素设置id（不推荐） #

手动给<Typography>、<img>等子元素都加上id={farmer.id}，但会产生冗余代码，维护成本高，不建议使用。

内容的提问来源于stack exchange，提问作者dani_l_n