我正在尝试通过单击使用 React.js 的按钮来更改图像，但出现错误

Question

I want my code to change Image when I click a button but it is giving me error saying "Warning: Expected onClick listener to be a function, instead got a value of object type." Here is the code:-

import React from 'react'
import './BigAd.css'
import ad1 from './ad1.jpg'
import ad2 from './ad2.jpg'
import ad3 from './ad3.jpg'
import ad4 from './ad4.png'
export default function BigAd() {
    const ChangeImage = async (fileName)=>{
       let img = document.querySelector("#BannerAd")
        img.setAttribute("src", fileName)
    }
  return (
    <div>
         <div className="container">
        <img id='BannerAd' src={ad1} alt="Ad"/>
        <button onClick={ChangeImage({ad1})}>button 2</button>
        <button onClick={ChangeImage({ad2})}>button 3</button>
        <button onClick={ChangeImage({ad3})}>button 1</button>
        <button onClick={ChangeImage({ad4})}>button 4</button>
        </div> 

    </div>
  )
}

Answer 1

So my method was completely wrong this is not how you manipulate DOM in react.js. I had to use UseState to get my code working here is how I fixed it:-

import React, {useState} from 'react'
import './BigAd.css'
import ad1 from './ad1.jpg'
import ad2 from './ad2.jpg'
import ad3 from './ad3.jpg'
import ad4 from './ad4.png'
export default function BigAd() {
    const [Image, setImage] = useState(ad1)
    const ChangeImage = async (Image)=>{
       setImage(Image);
    }
  return (
    <div>
         <div className="container">
        <img id='BannerAd' src={`${Image}`} alt="Ad"/>
        <button onClick={() => ChangeImage(ad1)}>button 1</button>
        <button onClick={() => ChangeImage(ad2)}>button 2</button>
        <button onClick={() => ChangeImage(ad3)}>button 3</button>
        <button onClick={() => ChangeImage(ad4)}>button 4</button>
        
        </div> 

    </div>
  )
}