事件处理

2018-05-04  本文已影响0人  张义飞

事件处理

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、事件的冒泡处理

上一篇 下一篇

猜你喜欢

热点阅读