图像点击反应答案

【问题标题】：image onclick in react图像点击反应
【发布时间】：2022-01-01 09:55:21
【问题描述】：

每次用户按下 img 时，我都会尝试添加 onClick 功能。我尝试了一些在堆栈溢出时找到的选项。以上选项都不适合我。我分享了一些不起作用的选项：

import React from "react";


export default function Movie(props) {
  
  const imageClick = () => {
    console.log('Click!!!!');
  }  
    return <img alt = "movieposter" src = {props.link} className ="d-flex justify-content-start m-3" id="movie" onClick={() => imageClick}/>
  }

import React from "react";


export default function Movie(props) {
  
  imageClick = () => {
    console.log('Click!!!!');
  }  
    return <img alt = "movieposter" src = {props.link} className ="d-flex justify-content-start m-3" id="movie" onClick={this.imageClick}/>
  }

import React from "react";


export default function Movie(props) {
  
  imageClick = () => {
    console.log('Click!!!!');
  }

  render () 
    {
    return (
    <img alt = "movieposter" src = {props.link} className ="d-flex justify-content-start m-3" id="movie" onClick={this.imageClick}/>
    )
  }
}

【问题讨论】：

我建议你先阅读并了解 this 关键字在 react 中的基础知识。试试这篇文章medium.com/byte-sized-react/what-is-this-in-react-25c62c31480

标签： reactjs react-native onclick

【解决方案1】：

import React from "react";

export default function Movie(props) {  
  const imageClick = () => {
    console.log('Click!!!!');
  }  
  return <img alt = "movieposter" src = {props.link} className ="d-flex 
    justify-content-start m-3" id="movie" onClick={() => imageClick()}/>
 }

您没有调用第一个示例中的函数。

React 中的函数式组件是无状态的（少实例）。因此，他们无权访问此关键字。因此，第二个和第三个示例将不起作用。简单地说，使用上面的例子。

【讨论】：

他在一个函数组件中使用this，在其他两个例子中，你不能通过绑定来解决。
感谢@VishnuSajeev 的纠正。 React 中的功能组件是无状态的（少实例）。因此，他们无权访问此关键字。因此，第二个和第三个示例将不起作用。简单来说，使用第一个例子

【解决方案2】：

如果需要在箭头函数中调用func

import React from "react";

export default function Movie(props) {  
  const imageClick = () => {
    console.log('Click!!!!');
  }  
      return <img alt = "movieposter" src = {props.link} className ="d-flex 
    justify-content-start m-3" id="movie" onClick={() => imageClick()}/>
 }

或者如果你想简单地传递你的处理程序

import React from "react";

export default function Movie(props) {  
  const imageClick = () => {
    console.log('Click!!!!');
  }  
      return <img alt = "movieposter" src = {props.link} className ="d-flex 
    justify-content-start m-3" id="movie" onClick={imageClick}/>
 }

或者如果你使用类基础组件

import React from "react";

class Movie extends React.Component {
  imageClick() {
    console.log('Click!!!!');
  }  
      return <img alt = "movieposter" src = {props.link} className ="d-flex 
    justify-content-start m-3" id="movie" onClick={this.imageClick}/>
 }

【讨论】：

【解决方案3】：

试试这个：

对于你的功能：

function imageClick () {
    console.log('Click!!!!');
}

及函数调用部分：

<img alt = "movieposter" src = {props.link} className ="d-flex 
        justify-content-start m-3" id="movie" onClick={imageClick} />

【讨论】：