React事件处理
语法:1.事件绑定的属性采用驼峰式写法。
2. 采用jsx的语法需要传入一个函数作为事件处理函数
<button onClick={activateLasers}> Activate Lasers</button>
3. 当使用ES6 clss语法定义一个组件时,事件处理器会成为类的一个方法
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback this.handleClick = this.handleClick.bind(this); }
handleClick() { this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn })); }
render() {
return ( <button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}}
ReactDOM.render(
<Toggle />,
document.getElementById('root'));
补充:箭头函数:x => x * x相当于
function (x) {
return x * x;
}
其实相当于一个匿名函数,简化了函数定义
区别:箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = function () {
return new Date().getFullYear() - this.birth; // this指向window或undefined
};
return fn();
}
};
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
return fn();
}
};
obj.getAge(); // 25
注意区别。
这个例子中 handleClick() { this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn }));
setState接收两个参数prevState和props,之后染回一个新的state
像事件处理程序传递参数
id 是你要删除那一行的 id,以下两种方式都可以向事件处理程序传递参数:
1. 作为参数显式传递:<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
2.隐式传递:<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>