一. react onclick函数绑定
参考:https://segmentfault.com/q/1010000010918131
renderSquare(i) { return ( <Square value={this.state.squares[i]} onClick={() => this.handleClick(i)} /> ); }
若使用
onClick={this.handleClick(i)}
会报错
原因如下:
如果 直接写
onClick={this.handleClick(i)}
这样函数在render的时候已经执行了呀,肯定不行噻,
所以说要这样
onClick= {this.handleClick}
但是 这个函数 需要携带一个 i 的参数过去
所以 就要用一个箭头函数把i 带过去啊。。
onClick = {()=>this.handleClick(i)}
这样闭包 让 i 对 renderSquare 的i 保持引用
myFunc = () => { alert("提示框"); } ... onClick = () => this.myFunc(); //等价于 onClick = function() { return function myFunc() { alert("提示框"); }; } onClick = this.myFunc(); //等价于 onClick = function() { alert("提示框"); }第一种不会立即执行,点击才会执行。
第二种是匿名函数,是会立即执行的。