React 第六章事件的绑定

1，React中元素事件的绑定

在传统的Html中对元素进行绑定写法如下：

<button onclick="activateLasers()">Activate Lasers
</button>

React中写法如下：

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

相比我们可以看到在元素上面事件名称传统的为全部小写，事件值为带有小括号的函数名。而React中事件名称为小驼峰命名。值用大括号括起来。

2，this对象的传递

在React组件的方法中我们经常需要用到组件的props属性传入的值以及需要更新界面的state引用对象this对象。

写法一：

import React from 'react';
import ReactDOM from 'react-dom';class Toggle extends React.Component{constructor(props){super(props);this.state={flag:true}this.click = this.click.bind(this);}
//  click=()=>{click(){ //此种写法内部不能引用到this对象，需要用上面的箭头函数进行才可以。this.setState({"flag":!this.state.flag});}render(){return  <button onClick={this.click}>{this.state.flag?"NO":"OFF"}</button>;}
}ReactDOM.render(<Toggle />,document.getElementById('root'));

在使用普通函数中需要使用this，则需要在构造函数中对其进行绑定this;this.click = this.click.bind(this);

写法二：

在元素绑定时，传入匿名函数。省略了构造函数中的绑定this语句。

import React from 'react';
import ReactDOM from 'react-dom';class Toggle extends React.Component{constructor(props){super(props);this.state={flag:true}}
//  click=()=>{click(){ //此种写法内部不能引用到this对象，需要用上面的箭头函数进行才可以。this.setState({"flag":!this.state.flag});}render(){return  <button onClick={(e)=>{this.click(e)}}>{this.state.flag?"NO":"OFF"}</button>;}
}ReactDOM.render(<Toggle />,document.getElementById('root'));

第三种（推荐）

使用ES6箭头函数定义被绑定的调用执行函数

import React from 'react';
import ReactDOM from 'react-dom';class Toggle extends React.Component{constructor(props){super(props);this.state={flag:true}}click=()=>{this.setState({"flag":!this.state.flag});}render(){return  <button onClick={this.click}>{this.state.flag?"NO":"OFF"}</button>;}
}ReactDOM.render(<Toggle />,document.getElementById('root'));

3，向被触发函数传递参数

import React from 'react';
import ReactDOM from 'react-dom';class Toggle extends React.Component{constructor(props){super(props);this.state={flag:true}}click=(a,b,c)=>{console.log(a);console.log(b);console.log(c);this.setState({"flag":!this.state.flag});}render(){return  <button onClick={this.click.bind(this,"999","888")}>{this.state.flag?"NO":"OFF"}</button>;}
}ReactDOM.render(<Toggle />,document.getElementById('root'));

根据打印我们可以看到，传参会根据传递的顺序依次传入，并且再函数参数中最后可以多获取一个传入参数事件e。

React 第六章事件的绑定相关推荐

[转]《精通Javascript》笔记：第六章(事件)
<精通Javascript>笔记:第六章(事件) Published by sansan at 11:41 am under 前端|Front-End 事件模型:捕获和冒泡通过oneve ...
python归一化增大差异_简学Python第六章__class面向对象编程与异常处理
Python第六章__class面向对象编程与异常处理欢迎加入Linux_Python学习群群号:478616847 目录: 面向对象的程序设计类和对象封装继承与派生多态与多态性特性pr ...
Vulkan规范笔记（一）第一章至第六章
目录前言第一章第三章 Fundamentals 主机和设备环境执行模式 Queue Operation object model object lifetime External Object ...
nrf52832 学习笔记（六）配对和绑定
nrf52832 学习笔记(六)配对和绑定配对绑定推荐博客低功耗蓝牙配对绑定解读和实践蓝牙在配对之前都是明文通信的,也就是说主从机之间传输的数据包可以被第三方抓取分析逆向,而且如果没有配对,谁都可 ...
计算机网络复习资料（前六章谢希仁版）
计算机网络复习作者:why will kill it 第一章概述 internet和Internet的区别以小写字母"i"开始的internet(互联网)是一个通用名词,它泛 ...
《SysML精粹》学习记录--第六章
<SysML精粹>学习记录第六章:活动图活动图简介活动图外框活动图的关键元素动作对象节点边动作详述控制节点活动分区小结第六章:活动图活动图简介 ...
jQuery系列第六章 jQuery框架事件处理
第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框 ...
第六章 PL/SQL与Oracle间交互
第六章 PL/SQL与Oracle间交互一.PL/SQL支持的SQL一览 PL/SQL扩展了SQL,变得更加强大和易用.我们可以用PL/SQL灵活安全地操作Oracle数据,因为它支持所有的SQL数 ...
Windows Shell编程-第十六章.命名空间扩展
第十六章命名空间扩展探测器使用层次结构表述形成系统的许多对象--文件,文件夹,打印机,网络对象等等.这些对象组合定义了一个命名空间,这是一个封闭的符号或名字集合,其中任何给定的符号或名字都能成功地 ...

React 第六章事件的绑定

React 第六章事件的绑定相关推荐

最新文章

热门文章

React 第六章 事件的绑定

React 第六章 事件的绑定相关推荐

最新文章

热门文章

React 第六章事件的绑定

React 第六章事件的绑定相关推荐