一、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复用的更多相关文章

  1. 为什么React事件处理函数必须使用Function.bind()绑定this？

    最近在React官网学习Handling Events这一章时,有一处不是很明白.代码如下: class Toggle extends React.Component { constructor(pr ...

  2. React事件处理函数传参问题

    React事件处理函数参数 HTML标签与React 组件是不同的,事件对象e是HTML标签元素的,组件没有的.

  3. （转）React事件处理函数必须使用bind(this)的原因

    1.JavaScript自身特性说明如果传递一个函数名给一个变量,之后通过函数名()的方式进行调用,在方法内部如果使用this则this的指向会丢失.示例代码:首先我们创建test对象并直接调用方法 ...

  4. react事件处理函数中绑定this的bind()函数

    问题引入 import React, { Component } from 'react'; import { Text, View } from 'react-native'; export def ...

  5. React 事件处理函数

    触摸事件:onTouchCancel\onTouchEnd\onTouchMove\onTouchStart (只会在移动设备上接受) 键盘事件:onKeyDown\onKeyPress\onKeyU ...

  6. jquery事件之事件处理函数

    一.事件处理 方法名 说明 语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器) Bind( 为每一个匹配元素的特定事件(像click)绑定一个事件处 ...

  7. React 学习(三) ---- state 和 事件处理函数

    在上两节中,我们讲述了props, 组件使用props进行渲染,但是这是一次性的, props渲染完成之后就不做任何事情了,但是现实中却不是这样的,当我们点击购物车上的加减按钮时,数量会自动加1或减1 ...

  8. React中的事件处理为什么要bind this?

    个人总结: 问: 请给我讲一下React中的事件处理为什么要bind this? 答: 好的,比如说我写了一个类组件,有个onClick属性 ,onClick={ this.fun },如果不bind ...

  9. Jquery动态绑定事件处理函数 bind / on / delegate

    1.bind方法绑定的事件处理函数不会应用到后来添加到DOM中的新元素.比如你在用bind给页面元素绑定事件之后,又新添加了一些与之前绑定过事件的元素一样的DOM元素,但是这些事件并不能在新的DOM元 ...

随机推荐

  1. Global::pickSpecificTable_DNT

    /*************************************************** Created Date: 13 Jul 2013 Created By: Jimmy Xie ...

  2. javascript中的省市级联效果

    学习javascript的时候都遇到过这样的需求,不仅是省市,还有其他的一些场景,看看关键的代码有哪些吧. <head runat="server"> <titl ...

  3. poj 3740 Easy Finding 二进制压缩枚举dfs 与 DLX模板详细解析

    题目链接:http://poj.org/problem?id=3740 题意: 是否从0,1矩阵中选出若干行,使得新的矩阵每一列有且仅有一个1? 原矩阵N*M $ 1<= N <= 16 ...

  4. c位段

    假如程序表示四盏灯的开关状态灯只有开或关两种状态所以用1和0就可以表示为了节省内存就用一个二进制位表示一盏灯这里就定义位域用 a b c d 各表示一盏 这里定义时注意选用无符号类型位域允许用各种格式 ...

  5. MYSQL-给带特殊符号的数据库创建用户名

    MYSQL-创建数据库及用户名: mysql> create database yoon;Query OK, 1 row affected (0.00 sec) mysql> grant ...

  6. 转：一份基础的嵌入式Linux工程师笔试题

    一. 填空题: 1. 一些Linux命令,显示文件,拷贝,删除 Ls cp rm 2. do……while和while……do有什么区别? 3. Linux系统下.ko文件是什么文件?.so文件是什么 ...

  7. 【转】- 使用T4模板批量生成代码

    前言 之前在 “使用T4模板生成代码 - 初探” 文章简单的使用了T4模板的生成功能,但对于一个模板生成多个实例文件,如何实现这个方式呢?无意发现一个解决方案 “MultipleOutputHelpe ...

  8. oracle 自定义函数

    函数和存储过程类似,可以简单的理解为一段可以执行某个活动/动作的子程序,可以作为一个系统对象被存储在数据库中,可以重复调用.与存储过程不同的是,函数总是向调用者返回一个值,而存储过程不能有返回值. C ...

  9. HTTP 错误 404.3 - Not Found由于扩展配置问题而无法提供您请求的页面。如果该页面是脚本，请添加处理程序。如果应下载文件，请添加 MIME 映射

    出现此错误可能是在安装IIS服务器的时候没有勾选“应用程序开发”, 解决方法如下: 就像安装IIS一样的步骤. 选择web服务器(IIS)后,再选择“应用程序开发”  选择asp.net  以及 服务 ...

  10. mysql innodb 引擎

    innodb 引擎 一.概述 InnoDB 是一个用的比较广泛的存储引擎,因为它支持事物和外键,还有不错的效率;我们先看看官方教程怎么说; 我们先读一下, 对于上面的文档, 对一个InnoDB的表首先 ...