在事件发生之前执行操作

Question

我有一个按钮，当点击时必须调用函数。但是，只要我在单击按钮之前重新加载页面，该函数就会运行。当我点击按钮时，它不起作用。这是我的代码：

show(){
  console.log('button Clicked');
}
render(){
  return(
    <button onClick={this.show()}>Show</button>
  )
}

每当我重新加载页面时，函数show都会运行，但是当我点击按钮时不会运行。单击按钮后该功能是否运行？你能告诉我我做错了吗。

Answer 1

你传递了一个函数调用，它将被评估（执行）。你需要为它提供一个函数：

<button onClick={() => this.show()}>Show</button>

您也可以使用this.show（不带括号），但如果要访问show中的this，则可能需要将其绑定或将show声明为stage-3类属性

Answer 2

您当前正在立即执行该功能。仅当您单击onClick事件中使用胖箭头时才能调用它：

render(){
  return(
    <button onClick={() => this.show()}>Show</button>
  )
}