恢复图像标签的数据

Question

下面的代码是我尝试过的。

当我点击搜索按钮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

你有一个小错误，注意onclickprop接受一个指向函数的指针，在你的代码中，你调用handleclick，它返回未定义的，因此，你的代码不工作。

您可以通过访问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;