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.vauleChange.bind(null,this.props.name)}/>
            </div>

          );
        }
})           

使用Input元件

let FormAdd = React.createClass({

    getInitialState: function() {
    
        return {  }
    },
   
    submit:function(){
    
        console.log(this.state);
        
    },
    
    vauleChange: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" vauleChange={this.vauleChange}></Input>
                    <Input placeholder="請輸入你的手機号" name="phone" vauleChange={this.vauleChange}> </Input>
                    <Input placeholder="請輸入你的微信号" name="wechat" vauleChange={this.vauleChange}></Input>
                    <Input placeholder="請輸入你的QQ号" name="qq" vauleChange={this.vauleChange}></Input>
                    <div className="rebtn" onClick={this.submit}></div>
                </div>
                      
            </div>

          );
        }
})

           

方法二

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.vauleChange}/>
            </div>

          );
        }
})           

let FormAdd = React.createClass({

    getInitialState: function() {
    
        return {  }
    },
   
    submit:function(){
    
        console.log(this.state);
        
    },
    
    vauleChange: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" vauleChange={this.vauleChange}></Input>
                <Input placeholder="請輸入你的手機号" name="phone" vauleChange={this.vauleChange}> </Input>
                <Input placeholder="請輸入你的微信号" name="wechat" vauleChange={this.vauleChange}></Input>
                <Input placeholder="請輸入你的QQ号" name="qq" vauleChange={this.vauleChange}></Input>
                <div className="rebtn" onClick={this.submit}></div>
            </div>

          );
        }
})

           

注：setState({xxx:xxx}) 第一個參數預設會被認為是字元串，因為動态傳遞的是一個變量 要用[]中括号包裹

參考：

React.js: Identifying different inputs with one onChange handler