React事件处理函数的bind复用和name复用
一、bind复用
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表单详解</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var MyForm = React.createClass({
getInitialState: function () {
return {
username: "",
gender: "man",
checked: true
};
},
handleChange: function (name, event) {
var newState = {};
newState[name] = name == "checked" ? event.target.checked : event.target.value;
this.setState(newState);
},
submitHandler: function (event) {
event.preventDefault();
console.log(this.state);
},
render: function () {
return <form onSubmit={this.submitHandler}>
<label htmlFor="username">请输入用户名:</label>
<input id="username" type="text" value={this.state.username} onChange={this.handleChange.bind(this, "username")} />
<br />
<select value={this.state.gender} onChange={this.handleChange.bind(this, "gender")}>
<option value="man">男</option>
<option value="woman">女</option>
</select>
<br />
<label htmlFor="checkbox">同意用户协议</label>
<input id="checkbox" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleChange.bind(this, "checked")} />
<button type="submit">注册</button>
</form>;
}
});
React.render(<MyForm></MyForm>, document.body);
</script>
</body>
</html>
二、name复用
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表单详解</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var MyForm = React.createClass({
getInitialState: function () {
return {
username: "",
gender: "man",
checked: true
};
},
handleChange: function (event) {
var newState = {};
newState[event.target.name] = event.target.name == "checked" ? event.target.checked : event.target.value;
this.setState(newState);
},
submitHandler: function (event) {
event.preventDefault();
console.log(this.state);
},
render: function () {
return <form onSubmit={this.submitHandler}>
<label htmlFor="username">请输入用户名:</label>
<input name="username" id="username" type="text" value={this.state.username} onChange={this.handleChange} />
<br />
<select name="gender" value={this.state.gender} onChange={this.handleChange}>
<option value="man">男</option>
<option value="woman">女</option>
</select>
<br />
<label htmlFor="checkbox">同意用户协议</label>
<input id="checkbox" name="checked" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleChange} />
<button type="submit">注册</button>
</form>;
}
});
React.render(<MyForm></MyForm>, document.body);
</script>
</body>
</html>
React事件处理函数的bind复用和name复用的更多相关文章
- 为什么React事件处理函数必须使用Function.bind()绑定this？
最近在React官网学习Handling Events这一章时,有一处不是很明白.代码如下: class Toggle extends React.Component { constructor(pr ...
- React事件处理函数传参问题
React事件处理函数参数 HTML标签与React 组件是不同的,事件对象e是HTML标签元素的,组件没有的.
- （转）React事件处理函数必须使用bind(this)的原因
1.JavaScript自身特性说明如果传递一个函数名给一个变量,之后通过函数名()的方式进行调用,在方法内部如果使用this则this的指向会丢失.示例代码:首先我们创建test对象并直接调用方法 ...
- react事件处理函数中绑定this的bind()函数
问题引入 import React, { Component } from 'react'; import { Text, View } from 'react-native'; export def ...
- React 事件处理函数
触摸事件:onTouchCancel\onTouchEnd\onTouchMove\onTouchStart (只会在移动设备上接受) 键盘事件:onKeyDown\onKeyPress\onKeyU ...
- jquery事件之事件处理函数
一.事件处理 方法名 说明 语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器) Bind( 为每一个匹配元素的特定事件(像click)绑定一个事件处 ...
- React 学习(三) ---- state 和 事件处理函数
在上两节中,我们讲述了props, 组件使用props进行渲染,但是这是一次性的, props渲染完成之后就不做任何事情了,但是现实中却不是这样的,当我们点击购物车上的加减按钮时,数量会自动加1或减1 ...
- React中的事件处理为什么要bind this?
个人总结: 问: 请给我讲一下React中的事件处理为什么要bind this? 答: 好的,比如说我写了一个类组件,有个onClick属性 ,onClick={ this.fun },如果不bind ...
- Jquery动态绑定事件处理函数 bind / on / delegate
1.bind方法绑定的事件处理函数不会应用到后来添加到DOM中的新元素.比如你在用bind给页面元素绑定事件之后,又新添加了一些与之前绑定过事件的元素一样的DOM元素,但是这些事件并不能在新的DOM元 ...
随机推荐
- JAVA四种线程池实例
1.new Thread的弊端 执行一个异步任务你还只是如下new Thread吗? Java 1 2 3 4 5 6 7 new Thread(new Runnable() { ...
- 【面试虐菜】—— LVS负载均衡
Load Balancer(负载均衡器): Load Balancer是整个集群系统的前端,负责把客户请求转发到Real Server上.Load Balancer通过Ldirectord监测各Rea ...
- Python脚本控制的WebDriver 常用操作 <二十六> 上传文件
测试用例场景 上传文件的方法是找到上传文件的对象,通常是的对象.然后直接往这个对象send_keys,传入需要上传文件的正确路径.绝对路径和相对路径都可以,但是上传的文件必须存在,否则会报错. Pyt ...
- 你的数据根本不够大，别老扯什么Hadoop了
本文原名"Don't use Hadoop when your data isn't that big ",出自有着多年从业经验的数据科学家Chris Stucchio,纽约大学柯 ...
- 管理口令(P):[INS-30001] ADMIN口令为空之Oracle安装
在安装oracle database11g 发行版的时候出现下面这个问题. 无论怎么输入密码都提示有问题,都输入得鬼火了!去百度了一下,果然有命名规则的 规则如下:小写字母+数字+大写字母
- show engine innodb status\G
mysql> show engine innodb status\G *************************** 1. row *************************** ...
- 自选项目--手机锁屏软件--NABC分析
N(Need 需求) 关键字:利用碎片时间加强对想记的事物的记忆.备忘.一般来说,锁屏目的大致有三点: 1.保护手机隐私 2.防止误操作手机 3.在不关闭系统软件的情况下节省电量 对于市面上已有的锁屏 ...
- rJava配置
1. 下载安装R-3.1.1-win.exe: 2. 在R中安装rJava > install.packages("rJava") 3. 设置环境变量: PATH:D:\So ...
- 常见的装置与其在Linux当中的档名
需要特别留意的是硬盘机(不论是IDE/SCSI/U盘都一样),每个磁碟机的磁盘分区(partition)不同时, 其磁碟档名还会改变呢!下一小节我们会介绍磁盘分区的相关概念啦!需要特别注意的是磁带机的 ...
- javascript实现播放音乐
<script language="javascript"> var flag = 0; //控制变量放在函数内起不到作用.function openplay() { ...