我试图通过使用React.js点击按钮来更改图像，但出现了错误

Question

我希望我的代码在单击按钮时更改Image，但它会给我错误提示"警告：onClick侦听器应为函数，而得到的却是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>
)
}