React页面加载时handleClick自动触发，求无需额外类的解决方案

嘿，我来帮你快速搞定这个小问题～

你遇到的核心问题很简单：你在onClick里写的是this.handleClick()，这会让React在页面渲染时直接执行这个函数，而不是把它作为点击事件的回调。

给你两种不需要创建额外类的解决方法，都是React里常用的：

方法一：直接传递函数引用（最推荐） #

你已经在constructor里通过this.handleClick = this.handleClick.bind(this)绑定了this，所以只需要把括号去掉，直接传函数本身就行：

<RaisedButton label="Login" style={btnStyle} onClick={this.handleClick} />

这样React就会在按钮被点击时才调用handleClick函数，完美符合你的需求。

方法二：用箭头函数包裹（适合需要传参的场景） #

如果之后你需要给handleClick传递参数，比如用户ID之类的，可以用箭头函数包裹一下，这样也不会在加载时触发：

<RaisedButton label="Login" style={btnStyle} onClick={() => this.handleClick()} />

比如要传参数的话可以写成：

<RaisedButton label="Login" style={btnStyle} onClick={() => this.handleClick(userId)} />

这两种方法都不需要额外创建类，改完之后你的按钮就只会在点击时触发函数啦～

内容的提问来源于stack exchange，提问作者Tomáš Zajda