美文网首页React
React处理事件

React处理事件

作者: iqing2012 | 来源:发表于2017-10-29 23:56 被阅读15次

通过 React 元素处理事件跟在 DOM 元素上处理事件非常相似。但是有一些语法上的区别:

  • React 事件使用驼峰命名,而不是全部小写。
    通过 JSX , 你传递一个函数作为事件处理程序,而不是一个字符串
  • 另一个区别是,在 React 中你不能通过返回 false(愚人码头注:即 return false; 语句) 来阻止默认行为。必须明确调用 preventDefault 。例如,对于纯 HTML ,要阻止链接打开一个新页面的默认行为,可以这样写:

当使用一个 ES6 类处理事件

定义一个组件时,通常的一个事件处理程序是类上的一个方法。例如, Toggle
组件渲染一个按钮,让用户在 “ON” 和 "OFF" 状态之间切换:

  • 在JSX回调中你必须注意 this 的指向。 在 JavaScript 中,类方法默认没有 绑定 的。如果你忘记绑定 this.handleClick 并将其传递给onClick,那么在直接调用该函数时,this会是 undefined。
  • 这不是 React 特有的行为;这是 JavaScript 中的函数如何工作的一部分。 一般情况下,如果你引用一个后面没跟 ()的方法,例如 onClick={this.handleClick},那你就应该 绑定(bind) 该方法。

相关文章

  • 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/pulupxtx.html