React编写input组件传参共用onChange

之前写页面上的input比较少，所以没有单提出来一个组件，今天研究了下input组件，但共用一个onChange的问题卡了一会儿，查了下发现几个比较好的方法，分享下:

方法一

Input组件

let Input = React.createClass({

    getInitialState: function() {

        return { }
    },

    render: function() {
        return (
            <div className="inputwrapper">
                <input type="text" placeholder={this.props.placeholder} onChange={this.props.valueChange.bind(null,this.props.name)}/>
            </div>

          );
        }
})

使用Input组件

let FormAdd = React.createClass({

    getInitialState: function() {

        return {  }
    },

    submit:function(){

        console.log(this.state);

    },

    valueChange:function(name,e){

        console.log(name+e.target.value);
        this.setState({[name]:  e.target.value})
    },

    render: function() { 

        return (

            <div className="all">
                    <Input placeholder="请输入你的姓名" name="name" valueChange={this.valueChange}></Input>
                    <Input placeholder="请输入你的手机号" name="phone" valueChange={this.valueChange}> </Input>
                    <Input placeholder="请输入你的微信号" name="wechat" valueChange={this.valueChange}></Input>
                    <Input placeholder="请输入你的QQ号" name="qq" valueChange={this.valueChange}></Input>
                    <div className="rebtn" onClick={this.submit}></div>
                </div>

            </div>

          );
        }
})

方法二

Input组件

let Input = React.createClass({

     getInitialState: function() {

        return { }
    },

    render: function() { 

        return (
            <div className="inputwrapper">
                <input type="text" placeholder={this.props.placeholder} name={this.props.name} onChange={this.props.valueChange}/>
            </div>

          );
        }
})

使用Input组件

let FormAdd = React.createClass({

    getInitialState: function() {

        return {  }
    },

    submit:function(){

        console.log(this.state);

    },

    valueChange:function(name,e){

        this.setState({[e.target.name]:  e.target.value});

        /*下面这种方式也可以
         var change = {};
         change[e.target.name] = e.target.value;
         this.setState(change);
        */
    },

    render: function() { 

        return (

            <div className="all">
                <Input placeholder="请输入你的姓名" name="name" valueChange={this.valueChange}></Input>
                <Input placeholder="请输入你的手机号" name="phone" valueChange={this.valueChange}> </Input>
                <Input placeholder="请输入你的微信号" name="wechat" valueChange={this.valueChange}></Input>
                <Input placeholder="请输入你的QQ号" name="qq" valueChange={this.valueChange}></Input>
                <div className="rebtn" onClick={this.submit}></div>
            </div>

          );
        }
})

注：setState({xxx:xxx}) 第一个参数默认会被认为是字符串，因为动态传递的是一个变量 要用[]中括号包裹

参考：React.js: Identifying different inputs with one onChange handler