美文网首页
React事件处理

React事件处理

作者: 宁小姐的慢时光 | 来源:发表于2018-07-15 20:57 被阅读0次

React元素的事件处理和DOM元素的区别

React元素的事件处理和DOM元素相似,但语法上有些不同:

  • React事件绑定属性的命名采用驼峰式写法,不是小写
  • 如果采用JSX的语法需要传入一个函数作为事件处理函数,不是字符串(DOM元素的写法)
//传统的HTML
<button onclick="handleDelete()">Delete</button>
//React中
<button onClick="this.handleDelete">Delete</button>
  • 在React中阻止默认行为不能使用return false,必须使用event.preventDefault()
    在react中,event是一个合成事件,不需要担心跨浏览器的兼容性问题。

React元素的事件处理如何使用

使用React的时候通常不需要使用addEventListener为已创建的DOM元素添加监听器,仅仅需要在这个元素初始渲染的时候提供一个监听器。
当使用ES6 class语法定义组件的时候,事件处理器会成为类的一个方法,如下面定义的删除组件

import React, {Component} from 'react'
export default class Delete extends Component {
  handleDelete = () => {}
  render() {
    return (
        <Button onClick={this.handleDelete}>
             Delete
        </Button>
    )
  }
}

注意:必须谨慎对待事件处理函数的this,类的方法默认不会绑定this,如果忘记绑定this.handleBatchDelete并把它传入onClick,当点击按钮时,this的值为undefined,会报错。

如何正确绑定事件处理函数

//方法一:在constructor中使用bind方法绑定
import React, {Component} from 'react'
export default class Delete extends Component {
  constructor(props) {
    super(props);
    // This binding is necessary to make `this` work in the callback
    this.handleDelete = this.handleDelete.bind(this);
  }
  handleDelete() {}
  render() {
    return (
        <Button onClick={this.handleDelete}>
             Delete
        </Button>
    )
  }
}

//方法二: 在回调函数中使用箭头函数
import React, {Component} from 'react'
export default class Delete extends Component {
  constructor(props) {
    super(props);
  }
  handleDelete() {}
  render() {
    return (
        <Button onClick={(e) => this.handleDelete(e)}>
             Delete
        </Button>
    )
  }
}

//方法三:使用属性初始化器语法
import React, {Component} from 'react'
export default class Delete extends Component {
  constructor(props) {
    super(props);
  }
  handleDelete = () => {}
  render() {
    return (
        <Button onClick={this.handleDelete}>
             Delete
        </Button>
    )
  }
}

注意:使用方法二有个问题是每次 Button 渲染的时候都会创建一个不同的回调函数。在大多数情况下,没有问题。如果这个回调函数作为一个属性值传入低阶组件,这些组件可能会进行额外的重新渲染。通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。

如何向事件处理程序传递参数

通常会为事件处理程序传递额外的参数,如:要删除某一行,需要传入该行id,如下:

//方法一:通过箭头函数方式传递参数,事件对象e必须显示的进行传递
import React, {Component} from 'react'
export default class Delete extends Component {
  constructor(props) {
    super(props);
  }
  handleDelete = (id, e) => {}
  render() {
    return (
       <Button onClick={(e) => {this.handleDelete(id, e)}}>
          Delete
       </Button>
    )
  }
}
//方法二:通过bind方式传参,事件对象e隐式的传递,并且e要排在所传递参数的后面
import React, {Component} from 'react'
export default class Delete extends Component {
  constructor(props) {
    super(props);
  }
  handleDelete = (id, e) => {}
  render() {
    return (
       <Button onClick={this.handleDelete.bind(this, id)}>
          Delete
        </Button>
    )
  }
}

参考文档:
http://react.yubolun.com/docs/handling-events.html

相关文章

  • 2018-11-07 react 事件处理

    react事件处理和dom事件处理是相似的。 react: Dom: 所以: React事件绑定属性的命名采用驼峰...

  • react文档——事件处理

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

  • React 事件处理机制

    React在处理事件和HTML中JS处理事件不同,本文介绍React中的事件处理机制。React中不同通过返回fa...

  • React基础(6) -- 事件处理

    React 事件处理 React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同: React 事件绑...

  • ReactJS_06 React 事件处理

    React 事件处理 React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同: React 事件绑...

  • React 事件处理

    React 事件处理 React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同: React 事件绑...

  • react随笔5 事件处理

    事件处理 React元素的事件处理和DOM元素的事件处理很相似,但是有一点语法上的不同: React事件绑定属性的...

  • React事件绑定this的几种方法

    React事件处理函数绑定this的集中方法 Follow me on GitHub React事件处理函数绑定t...

  • 学习笔记:React事件处理

    一、React 事件处理 React 元素的事件处理和 DOM 元素类似,但是有一点语法上的不同。 React 事...

  • 5.Handing Event(处理事件)

    React版本:15.4.2**翻译:xiyoki ** 使用React元素处理事件与处理DOM元素上的事件非常相...

网友评论

      本文标题:React事件处理

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