onClick处理程序将函数作为值。因此，您需要创建函数(也称为处理程序(，而不是传递console.log('hello'(，后者实际上返回字符串"hello"。
我试图做一个简单的任务，只是在点击按钮时将一些内容记录到控制台，但由于某种原因，它不起作用。我使用的是Startup Agency的Next.js网络应用程序模板，我不知道为什么它没有登录到控制台。启动应用程序后，这就是我在控制台中看到的，尽管我甚至没有点击按钮：
hello
GA init
Logging pageview for /product
当我点击按钮时，控制台上什么都没有出现，我不确定为什么会这样。这是我使用模板的网站链接，以备您需要。以下是我的代码：
export default function Product() {
return (
<div style={styles.container}>
<div style={styles.speechTitle}>Talk to us, tell us about your day...</div>
<div style={styles.speechBox}>
</div>
<button onClick={console.log('hello')}>Hello</button>
</div>
);
}
export default function Product() {
function clickHandler(event){
console.log("hello")
}
return (
<button onClick={clickHandler}>Hello</button>
);
}
如果你只需要一个按钮就可以完成任务，也可以使用箭头功能。
export default function Product() {
return (
<button onClick={(e) => {console.log("hello")}}>Hello</button>
);
}
阅读有关react 中事件的更多信息
您需要从函数返回console.log
export default function Product() {
return (
<div style={styles.container}>
<div style={styles.speechTitle}>Talk to us, tell us about your day...</div>
<div style={styles.speechBox}>
</div>
<button onClick={()=>console.log('hello')}>Hello</button>
</div>
);
}