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元 ...
随机推荐
- 为 WordPress 标签添加 rel="nofollow" 属性
WordPress 标签默认并无 rel="nofollow" 属性.rel="nofollow" 属性的作用是:告诉搜索引擎,无需追踪目标页,禁止蜘蛛爬行和传 ...
- Windows7鼠标右键里没有新建文本文件的选项，解决办法
1.“开始”->“运行”,输入"regedit",打开注册表编辑器 2.展开HKEY_CLASSES_ROOT,找到.txt 3.选中.txt,查看右侧窗格的“默认值”是不是 ...
- 数据的增量更新之EXISTS
有时候需要实现是数据的增量更新,因为更新全量会带来时间跟数据库资源的浪费,还有可能是数据出现冗余,所以需要使用增量数据同步,下面是一个数据增量同步的小实例. ---drop table A CREAT ...
- 安装mysql 5.5.14 报错
提示cmake nod foundyum install cmake 原因是曾经服务器安装过mysql数据库Installing MySQL system tables...101223 14:28: ...
- YARN环境搭建 之 一：CentOS7.0系统配置
一.我缘何选择CentOS7.0 14年7月7日17:39:42发布了CentOS 7.0.1406正式版,我曾使用过多款Linux,对于Hadoop2.X/YARN的环境配置缘何选择CentOS7. ...
- 设计模式之单例模式(Singleton Pattern)
单例模式 单例模式(Singleton Pattern)在java中算是最常用的设计模式之一,主要用于控制控制类实例的数量,防止外部实例化或者修改.单例模式在某些场景下可以提高系统运行效率.实现中的主 ...
- 【rest】 深入理解rest
起因是想搞明白 ajax.rest风格和http请求数据会有什么区别 再来回顾一下概念: REST即表述性 状态 传递 满足这些约束条件和原则的应用程序或设计就是RESTful.需要注意的是,REST ...
- C# list 去重
/// <summary> /// 汽车商标 获取 /// Redis Key=zgqp315_Redis_TrademarkC_List /// </summary> /// ...
- Ubuntu14.04下中山大学锐捷上网设置
Ubuntu14.04下中山大学锐捷上网设置 打开终端后的初始目录是 -,Ubuntu安装完毕默认路径,不是的请自行先运行cd ~ 非斜体字命令行方法,斜体字是图形管理方法,二选一即可 记得善用Tab ...
- KAFKA分布式消息系统
2015-01-05 大数据平台 Hadoop大数据平台 基本概念 kafka的工作方式和其他MQ基本相同,只是在一些名词命名上有些不同.为了更好的讨论,这里对这些名词做简单解释.通过这些解释应该可以 ...