事件处理
react提供了一系列的属性处理事件,这点和dom的事件处理是差不多的,不同的是react采用的是驼峰式的写法。
const theLogoIsClicked = () => {
console.log('clicked');
}
<Logo onClick={theLogoIsClicked} />
通常来说我们会使用下面例子的方式去处理一个元素发出的事件
class Switcher extends React.Component {
render() {
return (
<button onClick={ this._handleButtonClick }>
click me
</button>
);
}
_handleButtonClick() {
console.log('Button is clicked');
}
};
不错,我们通过_handleButtonClick将它传给onClick函数,但是这存在着一个问题,就是代码如果运行的上下文不保持一致那么就会出现问题,所以我们通常会用bind进行一个绑定动作。通常来讲我们应该在构造函数里进行绑定。
class Form extends React.Component {
constructor(props) {
super(props);
this._onNameChanged = this._onFieldChange.bind(this, 'name');
this._onPasswordChanged =
this._onFieldChange.bind(this, 'password');
}
render() {
return (
<form>
<input onChange={ this._onNameChanged } />
<input onChange={ this._onPasswordChanged } />
</form>
);
}
_onFieldChange(field, event) {
console.log(`${ field } changed to ${ event.target.value }`);
}
};
个人看法:
在react的事件里其实和dom事件差不多,主要注意几点。1、事件的绑定 2、事件的冒泡处理
网友评论