图像点击中的反应

Question

每次用户按下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}/>
    )
  }
}

Answer 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中的功能组件是无状态的(例如更少)。因此，他们无法访问这个关键字。因此，第二个和第三个示例将无法工作。简单地，使用上面的例子。

Answer 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}/>
 }

Answer 3

试试这个：

为您的职能：

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

和功能调用部分：

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