React学习笔记之事件处理（二）

之前已经给大家介绍了React中的条件渲染（传送门），本文将给大家关于React中事件处理的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：

React的事件处理和DOM的事件处理是很相似的，只是有一些语法上的区别：

  • React的事件名是驼峰的，不是小写的
  • 在JSX语法中，你传递一个fucntion作为时间处理器，而不是一个string

举个例子：

<button onClick={activateLasers}>
 Activate Lasers
</button>

而且如果你想拿到事件对象event，这个对象是React按照w3c标准完成的，所以不用担心浏览器的兼容性，可以像如下这样：

function ActionLink() {
 function handleClick(e) {
 e.preventDefault();
 console.log('The link was clicked.');
 }

 return (
 <a href="#" rel="external nofollow" onClick={handleClick}>
  Click me
 </a>
 );
}

如果用ES6的class写法可以像如下一样：

class Toggle extends React.Component {
 constructor(props) {
 super(props);
 this.state = {isToggleOn: true};

 // 这个`this`绑定是有必要的，用来让this可以在回调中被正确指向React组件的实例对象
 this.handleClick = this.handleClick.bind(this);
 }

 handleClick() {
 this.setState(prevState => ({
  isToggleOn: !prevState.isToggleOn
 }));
 }

 render() {
 return (
  <button onClick={this.handleClick}>
  {this.state.isToggleOn ? 'ON' : 'OFF'}
  </button>
 );
 }
}

ReactDOM.render(
 <Toggle />,
 document.getElementById('root')
);

还有两种方式可以避免写显式bind(this) ，但是都不推荐这么用啊~所以就不再赘述~

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 在React中如何优雅的处理事件响应详解

    前言 本文主要给大家介绍的是关于React处理事件响应的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍吧. React中定义一个组件,可以通过React.createClass或者ES6的class.本文讨论的React组件是基于class定义的组件.采用class的方式,代码结构更加清晰,可读性强,而且React官方也推荐使用这种方式定义组件. 处理事件响应是Web应用中非常重要的一部分.React中,处理事件响应的方式有多种. 一.使用箭头函数 先上代码: //代码1 class

  • React学习笔记之事件处理（二）

    之前已经给大家介绍了React中的条件渲染(传送门),本文将给大家关于React中事件处理的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: React的事件处理和DOM的事件处理是很相似的,只是有一些语法上的区别: React的事件名是驼峰的,不是小写的 在JSX语法中,你传递一个fucntion作为时间处理器,而不是一个string 举个例子: <button onClick={activateLasers}> Activate Lasers </button> 而

  • js学习笔记之事件处理模型

    在各种浏览器中存在四种事件模型:原始事件模型.标准事件模型.IE事件模型,还有一种Netscape4事件模型,下面具体介绍一下. 1.目前共存在四种事件处理模型分别是:原始事件模型.标准事件模型.IE事件模型,还有一种Netscape4事件模型,但基本可忽略 2.事件处理模型又可以分为基本事件处理和高级事件处理两种,原始事件模型属于基本事件处理,标准事件模型和IE事件模型属于高级事件处理 一.基本事件处理: 基本事件处理主要是指原始事件模型实现的事件处理.其主要分为以下两种: (1).作为HTM

  • React学习笔记之条件渲染（一）

    前言 在React中,你可以创建不同的组件各自封装你需要的东西.之后你可以只渲染其中的一部分,这取决于应用的state(状态).下面就来看看详细的介绍: 条件渲染 可以根据state的值进行组件的条件渲染.例如: function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />; }

  • React学习笔记之列表渲染示例详解

    前言 本文主要给大家介绍了关于React列表渲染的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 示例详解: 列表渲染也很简单,利用map方法返回一个新的渲染列表即可,例如: const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> ); ReactDOM.render( <ul>{listItems}<

  • react学习笔记之state以及setState的使用

    在react中通过 state 以及 setState() 来控制组件的状态. state state 是 react 中用来存储组件数据状态的,可以类比成 vue 中的 data. 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化. 2.state工作

  • React学习笔记之高阶组件应用

    是什么 高阶组件是一个函数,能够接受一个组件并返回一个新的组件.没有任何副作用. 为什么用 封装并抽离组件的通用逻辑,让此部分逻辑在组件间更好地被复用. 如何用 //hoc为我们的高阶组件,可以使用es7装饰器语法来使用高阶组件 //当然也可以不用es7,如:let hocHello = hoc(Hello),只是es7的语法更优雅一些. //高阶组件可以叠加使用,可以对一个组件使用多个高阶组件 @hoc class Hello extends React.Component { // } 如何

  • JQuery 学习笔记 选择器之二

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • Android学习笔记——Menu介绍(二)

    Android学习笔记——Menu介绍(二)

    知识点: 这次将继续上一篇文章没有讲完的Menu的学习,上下文菜单(Context menu)和弹出菜单(Popup menu). 上下文菜单 上下文菜单提供对UI界面上的特定项或上下文框架的操作,就如同Windows中右键菜单一样. 在Android中,有两种提供上下文操作的方式:一种是在浮动的上下文菜单(长按弹出)中,另一种是上下文操作模式里. 那么怎样创建一个浮动的上下文菜单(floating context menu)呢? 1.调用registerForContextMenu()方法为V

  • JavaScript 学习笔记（十二） dom

    Dom createElement().createTextNode().appendChild().removeChild().replaceChild().insertBefore().createDocumentFragment() //创建新节点 function CreatNode() { var oP = document.createElement("p"); oP.innerHTML = "<font style='color:red;'>Hell

  • Java中jqGrid 学习笔记整理——进阶篇(二)

    Java中jqGrid 学习笔记整理——进阶篇(二)

    相关阅读: Java中jqGrid 学习笔记整理--进阶篇(一) 本篇开始正式与后台(java语言)进行数据交互,使用的平台为 JDK:java 1.8.0_71 myEclisp 2015 Stable 2.0 Apache Tomcat-8.0.30 Mysql 5.7 Navicat for mysql 11.2.5(mysql数据库管理工具) 一.数据库部分 1.创建数据库 使用Navicat for mysql创建数据库(使用其他工具或直接使用命令行暂不介绍) 2. 2.创建表 双击打

随机推荐