我正在嘗試通過單擊使用 React.js 的按鈕來更改圖像，但出現錯誤

Question

我希望我的代碼在單擊按鈕時更改圖像，但它給了我錯誤消息“警告：預期onClick偵聽器是 function，而不是object類型的值。” 這是代碼： -

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

所以我的方法是完全錯誤的，這不是你在 react.js 中操作 DOM 的方式。 我必須使用 UseState 來讓我的代碼在這里工作，這就是我修復它的方式：-

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>
  )
}