在 React 中的图像上设置 onClick 侦听器

作者

在 React 中为图像设置 onClick 侦听器

Set an onClick listener on an Image in React

onClick在 React 中为图像设置监听器：

  1. onClick在图像元素上设置道具。
  2. 每次单击图像时，您传递给 prop 的函数都会被调用。
应用程序.js
const App = () => {
  const handleClick = event => {
    // 👇️ refers to the image element
    console.log(event.target);

    console.log('Image clicked');
  };

  return (
    <div>
      <img
        src="https://bobbyhadz.com/images/blog/react-prevent-multiple-button-clicks/thumbnail.webp"
        alt="car"
        onClick={handleClick}
      />
    </div>
  );
};

export default App;

我们onClick在图像元素上设置了 prop，因此每次单击该元素时，handleClick都会调用该函数。

如果您需要在handleClick 函数中访问图像元素，请访问对象的target属性event 。

如果事件未被触发，请确保您的图像元素未将 CSS 属性pointer-events设置为none。

如果要将参数传递给handleClick函数，请将onClick
prop 设置为内联箭头函数。

应用程序.js
const App = () => {
  const handleClick = (event, message) => {
    // 👇️ refers to the image element
    console.log(event.target);

    console.log(message);

    console.log('Image clicked');
  };

  return (
    <div>
      <img
        src="https://bobbyhadz.com/images/blog/react-prevent-multiple-button-clicks/thumbnail.webp"
        alt="car"
        onClick={(event) => handleClick(event, 'hello')}
      />
    </div>
  );
};

export default App;

请注意，我们将一个函数传递给onClickprop 而不是调用函数的结果。

如果您在将函数传递给onClickprop 时调用该函数，例如
onClick={handleClick()}，它会在组件安装时立即被调用。

您可以使用相同的方法onClick在本地图像上设置道具。

应用程序.js
import MyImage from './thumbnail.webp';

const App = () => {
  const handleClick = event => {
    // 👇️ refers to the image element
    console.log(event.target);

    console.log('Image clicked');
  };

  return (
    <div>
      <img src={MyImage} alt="horse" onClick={handleClick} />
    </div>
  );
};

export default App;

该示例假定您在与组件thumbnail.webp相同的文件夹中有一个名为的图像App。

确保指定图像文件的正确路径（包括扩展名）。

例如，如果您从一个目录向上导入图像，您将导入为import MyImage from '../thumbnail.webp'.

该图像必须位于src您的项目目录中。

请注意，在这两个示例中，我们都src在标签上设置了 prop以渲染图像。 img

对于来自外部 URL 的图像，您可以将src图像的 prop 设置为完整的 URL。

对于本地图像，您可以将src标签img的属性设置为导入的图像。

–

发表评论