多个表单元素重用change事件处理器

在使用约束表单组件时，可以再react中重用一个事件处理器

方法一：可以使用.bind（）传递其他参数

示例：

import React from 'react';

var MyForm = React.createClass({

          getInitialState(){

                   return{

                                        given_name:"",      family_name:""   

                             }

              },

           handleChange(name,event){

                       var newState = {};

                       newState[name] = event.target.value;

                        this.setState(newState);

            },

            handleSubmit(event){

                        event.preventDefault();

                        var fullName = [

                                   'Hi',this.state.given_name,this.state.family_name 

                      ]; 

                      alert(fullName.join(" "));

                       this.refs.given_name.value="";

                       this.refs.family_name.value="";

              }, 

           render(){

                return (

                   <form>

                      <label htmlFor="given_name">Given Name:</label>

                      <br />

                    <input type="text" name="given_name" value={this.state.given_name}

                             onChange={this.handleChange.bind(this,"given_name")}                ref="given_name" />

<br />

                 <input type="text" name="family_name" value={this.state.family_name}

                          onChange={this.handleChange.bind(this,"family_name")}                ref="family_name" />

                 <button onClick={this.handleSubmit}>submit</button>

          </form>

       )

     }

}):

export { MyForm as default }

方法二：使用DOMNode的name属性来判断需要更新哪一个组件的状态。

示例二：

上面的两个例子特别的相似，解决同样的问题，但是使用了不同的方式，React还在addon中提供了一个mixin，也可以通过这个方法解决这个问题。