点击按钮触发事件
尝试1:
<button onClick={this.showTable()}>Show Table</button>
返回错误信息:ReactJS: Maximum update depth exceeded error
原因: showTable()是去调用函数,因此render的时候会调用这个函数,然后页面更新,不停循环。
尝试2:
将函数调用改为函数引用
<button onClick={this.showTable}>Show Table</button>
返回错误信息:uncaught TypeError: Cannot read property 'setState' of undefined
,错误位置为
ShowTable() {
this.setState({
show : !this.state.show
});
}
原因:不同于ES5可以直接这样调用函数修改内部属性,在ES6中需要进行事件和this绑定。
尝试3:
<button onClick={this.ShowTable.bind(this)}>Show Table</button>
成功。
再来看看其他方法:
//函数
ShowTable=()=> {
this.setState({
show : !this.state.show
});
}
//调用
<button onClick={this.handlerShowTable}>Show Table</button>
点击按钮时传参数
ShowTable(value) {
this.setState({
show : !this.state.show,
name: value
});
}
<button onClick={this.ShowTable.bind(this, value)}>Show Table</button>