美文网首页
事件处理

事件处理

作者: 张义飞 | 来源:发表于2018-05-04 13:02 被阅读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、事件的冒泡处理

相关文章

  • JS 事件

    目录 事件流 事件处理程序HTML事件处理程序DOM0级事件处理程序DOM2级事件处理程序IE事件处理程序跨浏览器...

  • react事件处理

    一,事件处理 写法:on+事件名称= {事件处理函数} 类组件触发写法on+事件名称 = 事件处理函数 ---...

  • 跨浏览器的事件处理程序

    事件处理程序有DOM0级事件处理程序、DOM2级事件处理程序,IE事件处理程序,DOM0级事件处理程序具有简单,跨...

  • App事件中心

    App事件中心,事件的的生产端和处理端分离,事件处理结果广播通知,事件状态(初始化、处理中和处理完成)管理,事件类...

  • Chapter 07. Broadcast

    阅读原文 7.1 . 理论概述 广播事件处理属于系统级的事件处理(一般事件处理是属于View级的事件处理) 一个应...

  • iOS和Flutter里的事件处理

    目录先说一下事件处理里的被处理者:事件一、iOS里的事件二、Flutter里的事件然后说一下事件处理里的处理者:响...

  • react文档——事件处理

    事件处理 React 元素的事件处理和 DOM 元素的事件处理非常相似。但也有一些语法差异: React 事件使用...

  • DOM事件的问题!

    1.事件冒泡 2.事件捕获 事件处理程序 1.HTML事件处理程序 2.DOM 0级事件处理程序 3.DOM 2级...

  • 2021-09-22 GUI(事件监听机制)

    事件监听机制组成事件源(组件)事件(Event)监听器(Listener)事件处理(引发事件后处理方式) 事件监听...

  • attachEvent和addEventListener区别

    attachEvent是IE的事件处理方法,是DOM0事件处理程序,只能在事件冒泡阶段触发。接收两个参数,事件处理...

网友评论

      本文标题:事件处理

      本文链接:https://www.haomeiwen.com/subject/gaddrftx.html