React 事件 4
微信小程序开发交流qq群 173683895
承接微信小程序开发。扫码加微信。
将参数传递给事件处理程序
在循环内部，通常需要将额外的参数传递给事件处理程序。例如，如果id是行ID，则以下任何一个都可以工作：
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>上面两行是等价的，并使用箭头功能和Function.prototype.bind分别。
在这两种情况下，e表示React事件的参数将作为ID之后的第二个参数传递。使用箭头函数，我们必须显式传递它，但bind任何进一步的参数都会自动转发。
下面是3个点击事件的Demo:
1.使用bind的绑定事件：
class Toggle extends React.Component {constructor(props) {super(props);this.state = {isToggleOn: true};// This binding is necessary to make `this` work in the callbackthis.handleClick = this.handleClick.bind(this);}handleClick() {this.setState(state => ({isToggleOn: !state.isToggleOn}));}render() {return (<button onClick={this.handleClick}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>);}
}ReactDOM.render(<Toggle />,document.getElementById('root')
);2.使用组件属性等于一个函数的绑定事件
class LoggingButton extends React.Component {constructor(props){super(props);this.state = {a:12}}handleClick = () => {console.log('this is:', this);this.setState(state=>({a:123 }));}render() {return (<button onClick={this.handleClick}>Click me{this.state.a}</button>);}
}ReactDOM.render(<LoggingButton />,document.getElementById('root')
);3.在回调中使用箭头函数
class LoggingButton extends React.Component {handleClick() {console.log('this is:', this);}render() {// This syntax ensures `this` is bound within handleClickreturn (<button onClick={(e) => this.handleClick(e)}>Click me</button>);}
}4.登录和登出事件，加条件判断
class LoginControl extends React.Component {constructor(props) {super(props);this.handleLoginClick = this.handleLoginClick.bind(this);this.handleLogoutClick = this.handleLogoutClick.bind(this);this.state = {isLoggedIn: false};}handleLoginClick() {this.setState({isLoggedIn: true});}handleLogoutClick() {this.setState({isLoggedIn: false});}render() {const isLoggedIn = this.state.isLoggedIn;let button;if (isLoggedIn) {button = <LogoutButton onClick={this.handleLogoutClick} />;} else {button = <LoginButton onClick={this.handleLoginClick} />;}return (<div><Greeting isLoggedIn={isLoggedIn} />{button}</div>);}
}function UserGreeting(props) {return <h1>Welcome back!</h1>;
}function GuestGreeting(props) {return <h1>Please sign up.</h1>;
}function Greeting(props) {const isLoggedIn = props.isLoggedIn;if (isLoggedIn) {return <UserGreeting />;}return <GuestGreeting />;
}function LoginButton(props) {return (<button onClick={props.onClick}>Login</button>);
}function LogoutButton(props) {return (<button onClick={props.onClick}>Logout</button>);
}ReactDOM.render(<LoginControl />,document.getElementById('root')
);
5.input输入配合点击事件实现input输入的内容出现弹窗
function FancyBorder(props) {return (<div className={'FancyBorder FancyBorder-' + props.color}>{props.children}</div>);
}function Dialog(props) {return (<FancyBorder color="blue"><h1 className="Dialog-title">{props.title}</h1><p className="Dialog-message">{props.message}</p>{props.children}</FancyBorder>);
}class SignUpDialog extends React.Component {constructor(props) {super(props);this.handleChange = this.handleChange.bind(this);this.handleSignUp = this.handleSignUp.bind(this);this.state = {login: ''};}render() {return (<Dialog title="Mars Exploration Program"message="How should we refer to you?"><input value={this.state.login}onChange={this.handleChange} /><button onClick={this.handleSignUp}>Sign Me Up!</button></Dialog>);}handleChange(e) {this.setState({login: e.target.value});}handleSignUp() {alert(`Welcome aboard, ${this.state.login}!`);}
}ReactDOM.render(<SignUpDialog />,document.getElementById('root')
);
相关文章：
border-radius
周知：OPPO R819T Android 4.2.1和红米某些机型上，webview中，如果一个元素定义了 border border-radius，这时如果该元素有背景，那么背景将会溢出圆角之外，Yo新增了一个方法来fix这个问题，大家之…
javascript调试_如何提高JavaScript调试技能
javascript调试Almost all software developers who have written even a few lines of code for the Web have had at least a quick glance at JavaScript. After all, it is currently one of the most in-demand programming languages.几乎所有甚至为Web编写了几行代码的软…
Java transient
原文出自：http://www.importnew.com/21517.html 1. transient的作用及使用方法 我们都知道一个对象只要实现了Serilizable接口，这个对象就可以被序列化，java的这种序列化模式为开发者提供了很多便利，我们可以不必关系具体序列化的…
KBMMW 的日志管理器
kbmmw 4.82 最大的新特性就是增加了 日志管理器。 新的日志管理器实现了不同类型的日志、断言、异常处理、计时等功能。 首先。引用kbmMWLog.pas 单元后，系统就默认生成一个IkbmMWLog 实例： Log:IkbmMWLog; log 默认使用对应操作系统的日志功能。 为了能…
React 循环渲染 5
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 使用循环渲染的demo： const todoItems todos.map((todo) ><li key{todo.id}>{todo.text}</li> ); const todoItems todos.map((todo, index) >// Only do this if item…
面试时与人事交谈时间_如何与您的技术负责人交谈并解决通讯故障
面试时与人事交谈时间by Greg Sabo由格雷格萨博(Greg Sabo) 如何与您的技术负责人交谈并解决通讯故障 (How to talk to your tech lead and fix your communication glitches) Here’s where you messed up.这是你搞砸的地方。 Your tech lead told you to build out a new A…
inotify简介
一、inotify简介 inotify是Linux内核2.6.13 (June 18, 2005)版本新增的一个子系统（API），它提供了一种监控文件系统（基于inode的）事件的机制，可以监控文件系统的变化如文件修改、新增、删除等，并…
链路层寻址与 ARP
一、 MAC 地址 不是主机或路由器具有链路层地址，而是它们的适配器（即网络接口）具有链路层地址。因此，具有多个网络接口的主机或路由器将具有与之相关联的多个链路层地址。 然而，链路层交换机并不具有与它们接口相关联的…
React 开始制作 6
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 从模拟开始 第1步：将UI分解为组件层次结构 不同的颜色为不同的组件， 第2步：在React中构建静态版本 第3步：确定UI状态的最小（但完整ÿ…
php 空间类元素引入_引入单元素模式
php 空间类元素引入by Diego Haz迭戈哈兹(Diego Haz) 引入单元素模式 (Introducing the Single Element Pattern) 使用React和其他基于组件的库创建可靠的构建基块的规则和最佳实践。 (Rules and best practices for creating reliable building blocks with React and other …
Tcl学习之--列表|字典
【列表|字典】Tcl使用列表来处理各种集合，比方一个目录中的全部文件，以及一个组件的全部选项。最简单的列表就是包括由随意个空格、制表符、换行符、分隔的随意多个元素的字符串。比方: JerryAlice Mandy David l lindex命令: --> 获取元素 至少须要…
JAVA代码实现下载单个文件，和下载打包文件
//下载单个文件调用方法 /** * response * imgPath 下载图片地址 * fileName 保存下载文件名称 * date 2015年4月14日 下午5:53:24 */ public static void download(HttpServletResponse response,String imgPath,String fileName){ OutputStrea…
php读取本地xlsx格式文件的数据并按json格式返回
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 目的：php读取并操作本地xlsx格式的文件； 完整示例代码： 代码讲解：前端发起post网络请求，php接收一个name（姓名）的参数…
面向对象编程概念_如何向6岁的孩子解释面向对象的编程概念
面向对象编程概念by Alexander Petkov通过亚历山大佩特科夫(Alexander Petkov) Have you noticed how the same cliche questions always get asked at job interviews — over and over again?您是否注意到在求职面试中总是一遍又一遍地问同样的陈词滥调问题？ I…
jQuery 属性
jQuery 属性 方法描述context在版本 1.10 中被废弃。包含被传递到 jQuery 的原始上下文jquery包含 jQuery 的版本号jQuery.fx.interval改变以毫秒计的动画运行速率jQuery.fx.off对所有动画进行全局禁用或启用jQuery.support包含表示不同浏览器特性或漏洞的属性集（主…
mongodb的几种启动方法
1 mongodb的几种启动方法 启动Mongodb服务有两种方式，前台启动或者Daemon方式启动，前者启动会需要保持当前Session不能被关闭，后者可以作为系统的fork进程执行，下文中的path是mongodb部署的实际地址。1. 最简单的启动方式…
php 修改数据库表的字段的值
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 php 前端传递参数，遍历数据库表的字段后根据条件进行修改。 <?phpheader("Content-Type:text/html;charsetutf8"); header("Access-Control-Allow-Origin: *"); //解…
如何开始使用PostgreSQL
by Akul Tomar通过Akul Tomar 如何开始使用PostgreSQL (How to get started with PostgreSQL) PostgreSQL is an open source Relational Database Management System (RDBMS). In this article, I’ll provide an introduction to getting started with PostgreSQL. Here is …
Java中数组常见的几种排序方法！
数组的定义： int[] arr new int[5];int[] arr1 {1,2,3,4,5};long[] arr2 new long[6];String[] strs new String[5];Person[] ps new Person[5]; 数组的操作： int[] arr {45, 34, 53, 43};Arrays.sort(arr);System.out.println(Arrays.toString(ar…
oracle 如何预估将要创建的索引的大小
一.1 oracle 如何预估将要创建的索引的大小 oracle 提供了2种可以预估将要创建的索引大小的办法： ① 利用包 Dbms_space.create_index_cost 直接得到 ② 利用11g新特性 Note raised when explain plan for create index 下边分别举例说明。 一.2 环境说明 [ora…
删除对象的某个属性
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 实现代码： var data {a:1,b:2,c:3}for(var item in data){if (item b) {delete data[item];} }console.log(data:, data) 打印结果： data: {a: 1, c: 3}
java 学到什么实习_我如何获得外展实习机会以及到目前为止所学到的知识
java 学到什么实习by Nguedia Adele由Nguedia Adele 我如何获得外展实习机会以及到目前为止所学到的知识 (How I got my Outreachy internship and what I’ve learned so far) I recently got accepted for an Outreachy internship, working with LibreHealth.我最近接受了与…
STM32F103C8开发板原理图和管脚图
转载于:https://www.cnblogs.com/libra13179/p/6894335.html
js实用数组方法
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 判断是否为数组 1. Array.isArray([]) 2. var arr[1,2] arr instanceof Array -->true arr instanceof String -->false map ---- 返回数组得出的结果 const filtered [1, 2,…
BasicModal - 简单易用的现代 Web App 弹窗
BasicModal 是为现代 Web 应用程序打造的弹窗系统。它包括所有你需要显示的信息，问题或接收用户的输入。这里的弹窗还可以链接起来，所以你可以很容易地建立一个预定义顺序的安装帮助或显示对话框。无效输入可以使用包含突出显示和处理功能。 在线演示 …
javascript选择器_如何通过选择正确JavaScript选择器来避免沮丧
javascript选择器选择器如何影响代码的快速指南 (A quick guide on how selectors affect your code) While working on a project, I ran into an issue in my code. I was attempting to define multiple HTML elements into a collection and then change those elements ba…
Asp.net中GridView使用详解(引)【转】
Asp.net中GridView使用详解(引) GridView无代码分页排序 GridView选中，编辑，取消，删除 GridView正反双向排序 GridView和下拉菜单DropDownList结合 GridView和CheckBox结合 鼠标移到GridView某一行时改变该行的背景色方法一 鼠标移到GridView…
《任正非：我若贪生怕死，何来让你们英勇奋斗》
非常高兴尼泊尔代表处的进步，你们的一个历史项目概算亏损，从大前年亏损2.7亿美金，到前年亏损3000万美金，到去年盈利2140万美金。在喜马拉雅南麓一路爬坡，辛苦了。听说去年你们都涨了工资，我十分高兴。巴西代…
个人使用微信支付
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 首先在PAYJS申请到商户号和密钥， 然后实现源码如下： <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><title>…
构建node.js基础镜像_我如何使用Node.js构建工作抓取网络应用
构建node.js基础镜像by Oyetoke Tobi Emmanuel由Oyetoke Tobi Emmanuel 我如何使用Node.js构建工作抓取网络应用 (How I built a job scraping web app using Node.js) Scraping jobs from the web has now become easier thanks to Indreed.现在，借助Indreed&…