从图像标签的 onClick() 恢复数据

Question

您好，我有一组从 Giphy api 恢复的猫图像。

我想要做的是点击图片和console.log与图片关联的url。

下面的代码是我试过的。

当我点击搜索按钮时，所有这些都会发生 console.log 显示了 25 个未定义的项目。

所以我认为我传递信息是错误的，它正在检测 div 之外的 onCLick

import React from "react";

function handleClick(props) {
  console.log(props.gif);
}

const UserItem = props => {
  return (
    <div className="column">
      <img
        onClick={handleClick(props.gif)}
        alt=""
        src={props.gif}
        className="ui image"
      />
    </div>
  );
};

export default UserItem;

Answer 1

您有一个小错误，请注意 onClick 属性接受一个指向函数的“指针”，在您的代码中，您正在调用 handleClick 并返回 undefined，因此，您的代码不起作用。

您可以通过访问 click 事件更改您的处理程序以获取 clicked 元素 src 属性。

import React from "react";

function handleClick(event) {
  console.log(event.target.src);
}

const UserItem = props => {
  return (
    <div className="column">
      <img
        onClick={handleClick}
        alt=""
        src={props.gif}
        className="ui image"
      />
    </div>
  );
};

export default UserItem;