反應中的影像點擊-有解無憂

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

uj5u.com熱心網友回復：

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 中的功能組件是無狀態的（實體較少）。因此，他們無權訪問此關鍵字。因此，第二個和第三個示例將不起作用。簡單來說，使用上面的例子。

uj5u.com熱心網友回復：

如果需要在箭頭函式中呼叫 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}/>
 }

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/401165.html

標籤：反应反应原生点击

上一篇：如何將子組件資料共享到父組件uisng背景關系API到Reactjs

下一篇：如何擁有多個開關？