React按钮点击函数异常：页面加载时执行，点击无响应问题排查

嗨，这个问题其实是React事件绑定里很常见的小坑～

核心原因 #

你在onClick属性里写的是this.show()，这里的括号会让函数在组件渲染阶段就立即执行，而不是把函数本身绑定给点击事件。

简单拆解下逻辑：

• 加括号的this.show()是直接调用函数，返回的是函数执行后的结果（你的show函数没有返回值，所以实际是undefined）
• 点击事件需要接收的是一个函数引用，而不是函数执行后的结果
• 所以页面刷新时函数自动执行了，点击按钮时，onClick拿到的是undefined，自然没有响应

解决办法 #

有几种常用的方式可以修复：

1. 直接传递函数引用（去掉括号）

把onClick={this.show()}改成onClick={this.show}，这样就把函数本身传给点击事件，只有点击按钮时才会执行：

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

如果你的show函数里需要用到this（比如访问组件的state/props），可能需要提前绑定上下文，比如用下面的箭头函数方式或者构造函数绑定方式

2. 用箭头函数包裹

用箭头函数把this.show()包起来，这样箭头函数会在点击时才去调用目标函数，这种方式还方便传递参数：

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

3. 构造函数中绑定上下文（针对需要用到this的场景）

如果show函数依赖组件的this，可以在组件的构造函数里提前绑定：

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

内容的提问来源于stack exchange，提问作者Anita