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

2016-12-23  本文已影响0人  DontPushMeForev

在使用约束表单组件时,可以再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,也可以通过这个方法解决这个问题。

上一篇 下一篇

猜你喜欢

热点阅读