手动绑定
bind方法
此方法可以绑定事件处理器内的this,并可以向事件方法传参
class test extends Component {
handleEdit(param) {
console.log(param)
}
render() {
return <button onClick={this.handleEdit.bind(this, param)}>编辑</button>
}
}
// 如果不传参可用双冒号::
<button onClick={::this.handleEdit}>编辑</button>
构造器内声明
class test extends Component {
constructor(props){
super(props);
this.handleEdit = this.handleEdit.bind(this);
}
handleEdit(param) {
console.log(param)
}
render() {
return <button onClick={this.handleEdit}>编辑</button>
}
}
箭头函数
方法1
class test extends Component {
handleEdit = (e) => {
console.log(e)
}
render() {
return <button onClick={this.handleEdit}>编辑</button>
}
}
方法2
class test extends Component {
handleEdit(param) {
console.log(param)
}
render() {
return <button onClick={() => this.handleEdit(param)}>编辑</button>
}
}
自动绑定
es5写法, React.createClass