[求助]关于onClick事件和方法传递

#1

class NavList extends React.Component{

itemClick(i) {
	console.log(i);
}

render() {

	return (
		<div className="navlist">
			<ul className="menu-level-1">
				<div onClick={this.itemClick(88)}>点击</div>
			</ul>
		</div>
	);
}

}

为啥传入88刷新直接就打印出来了，点击反倒不管用，，，试了一下，貌似给this.itemClick后面加了()就直接执行了，，，如果想给itemClick方法传值还能正常绑定该咋办？？？

#2

可以用箭头函数：

...
onClick{(e) => this.itemClick(88)}
...

还可以把参数写在标签的属性上：

itemClick(e) {
	console.log(e.target.getAttribute('data-i'));
}
...
<div data-i="88" onClick={this.itemClick}>
...
#3

可以使用bind进行传参，比如onClick ={this.itemClick.bind(this,88)} 就可以等到实际点击的时候，函数运行

1 Like
#4

事件在绑定的时候只能绑定方法名。如果你要传入一个参数的话，建议将参数放进props或者state中。
onClick : function(){console.log(this.props.i)}
onClick={this.itemClick.bind(this)}
或者采用参数的形式
onClick : function(i){console.log(i)}
onClick={this.itemClick.bind(this,this.props.i)}

#5

嗯，谢谢

#6

谢谢

#7

谢谢了

#8 
onClick={this.itemClick(88)}

函数绑定前就执行了，传给onClick的是执行后的返回值。

楼上大家说得很清楚，只需要把函数的引用传给onClick，如：
onClick ={this.itemClick.bind(this,88)}