Html 当我使用“点击”在JSX文件中的图像时，如何使onClick功能工作；这是什么；？

我试图让客户端在单击图像时向特定端点发出POST请求，以便将请求数据保存在mongoDB上。我使用的是React钩子和JSX

问题是，尽管图像标记上有onClick属性，但图像似乎没有被单击。我之所以知道这一点，是因为saveFav函数中的控制台日志消息没有显示

编辑：错误消息显示： “未捕获（承诺中）TypeError:无法读取未定义的属性'getAttribute'，因此关键字'this'未定义。我想它是指图像标签

我必须硬编码imgGold属性的值，而不使用“this”或任何其他方式

我试着在这个网站上研究其他问题，但大多数问题都涉及按钮

App.js的代码如下：

import React, {useState, useEffect} from 'react';
import axios from 'axios';
const regeneratorRuntime = require("regenerator-runtime");
// import CardBox from './cardBox.js'

const HS = () => {

  const getData = async() => {
    const data = await axios.get('/api/getMoreCards')
    console.log(data)
    setData(data)
}
  const [data, setData] = useState({});
    useEffect(()=>{
      getData()
    },[]);


  // function that send post request when img is clicked
  const saveFav = async () => {
        let body = {
            imgGold: this.getAttribute("id") // returns line 43 id attribute value
        };
    await axios.post('/api/getFavCards', body);
    console.log('img clicked')
    };

    return (
      <>
        <h2 style={{"color": "gold"}}>List of Cards</h2>
        
        {data?.data?.length && (
            <div>
              {data.data[23].name}
              <img id={data.data[23].imgGold} src={data.data[23].img} onClick={saveFav}></img>
            </div>
        )}

export default HS;

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
const registratorruntime=require（“再生器运行时”）；
//从“./CardBox.js”导入CardBox
常数HS=（）=>{
const getData=async（）=>{
const data=wait axios.get（“/api/getMoreCards”）
console.log（数据）
setData（数据）
}
const[data，setData]=useState（{}）；
useffect（（）=>{
getData（）
},[]);
//单击img时发送post请求的函数
const saveFav=async（）=>{
让主体={
imgGold:this.getAttribute（“id”）//返回第43行的id属性值
};
等待axios.post（'/api/getFavCards'，正文）；
console.log（'img clicked'）
};
返回(
卡片清单
{data？.data？.length&&(
{data.data[23].name}
)}
导出默认HS；

在这段代码中，数据是一个具有“data”属性的对象，其值是一个对象数组。object元素具有name、img和imgGold等属性

此外，我对/api/getFavCards的POST和GET请求都可以工作，这是使用Postman应用程序测试的

请告知如何在saveFav函数内编写属性imgGold值的代码

---

谢谢

如果要获取图像标记id，需要在事件的目标属性中查找它，该属性是对触发它的对象的引用

尝试将您的saveFav更改为：

  const saveFav = async (event) => {
        let body = {
            imgGold: event.target.id // Gets the id of the clicked image
        };
    await axios.post('/api/getFavCards', body);
    console.log('img clicked')
    };

---

与其将所需的值存储在DOM中，不如将

data.data[23].imgGold

作为参数直接传递给

saveFav

。类似于：

  const saveFav = async imgGold => {
    let body = {
        imgGold
    };
    await axios.post('/api/getFavCards', body);
    console.log('img clicked')
  };

{data？.data？.length&&(
{data.data[23].name}
saveFav（data.data[23].imgGold）}>
)}

    {data?.data?.length && (
        <div>
          {data.data[23].name}
          <img src={data.data[23].img} onClick={() => saveFav(data.data[23].imgGold)}></img>
        </div>
    )}