如何處理多個輸入值並將其作爲一個對象

Question

我目前正在學習反應，當我想提交價值時遇到了麻煩。我想要的是讓他們成爲一個對象。

var React = require("react"); 

var AddContact = React.createClass({ 
    onSubmit:function(e){ 
    e.preventDefault(); 

    var name = this.refs.name.value; 
    var phoneNumber = this.refs.phoneNumber.value; 
    var update = {}; 


    if(name.length > 0){ 
    this.refs.name.value = ""; 
    update.name = name; 
}else if (phoneNumber.length > 0) { 
    this.refs.phoneNumber.value = ""; 
    update.phoneNumber = phoneNumber; 
}else if(name === ""){ 
    this.refs.name.focus(); 
}else{ 
    this.refs.phoneNumber.focus(); 
} 

this.props.onSetContact(update); 
}, 

render:function(){ 
    return(
    <div> 
    <form onSubmit={this.onSubmit}> 
     <input type="text" ref="name" placeholder="Contact Name"/> 
     <input type="text" ref="phoneNumber" placeholder="Phone Number"/> 
     <input type="submit" value="Add Contact"/> 
    </form> 
    </div> 
) 
} 
}); 

module.exports = AddContact; 

在這種情況下，我想存儲更新變量的值，但當我提交他們成爲不同的對象時，我在這裏得到的。

無論如何，onSetContact在父組件上定義，它只是記錄窗體的輸出。

我的目標是讓他們爲{名稱：[值]，電話號碼：[值]}

謝謝你們

Answer 1

的問題是在此代碼：

if(name.length > 0){ 
    this.refs.name.value = ""; 
    update.name = name; 
}else if (phoneNumber.length > 0) { 
    this.refs.phoneNumber.value = ""; 
    update.phoneNumber = phoneNumber; 
}else if(name === ""){ 
    this.refs.name.focus(); 
}else{ 
    this.refs.phoneNumber.focus(); 
} 

它永遠不會如果＃2，如果name存在...

您需要檢查phoneNumber在另一個if聲明，如下所示：

if(name.length > 0){ 
    this.refs.name.value = ""; 
    update.name = name; 
} else { 
    this.refs.name.focus(); 
} 

if (phoneNumber.length > 0) { 
    this.refs.phoneNumber.value = ""; 
    update.phoneNumber = phoneNumber; 
} else { 
    this.refs.phoneNumber.focus(); 
} 

Answer 2

的問題是在你的條件ñonSubmit功能，因爲使用的是if-else，如果一個聲明是真實的沒有其他將執行，他們從這個陣營文檔堅持改變

onSubmit:function(e){ 
    e.preventDefault(); 

    var name = this.refs.name.value; 
    var phoneNumber = this.refs.phoneNumber.value; 
    var update = {}; 

    if(name.length > 0 && phoneNumber.length > 0) { 
     this.refs.name.value = ""; 
     update.name = name; 
     this.refs.phoneNumber.value = ""; 
     update.phoneNumber = phoneNumber; 
     this.props.onSetContact(update); 
    } else if (name.length == 0){ 
     this.refs.name.focus(); 
    }else{ 
     this.refs.phoneNumber.focus(); 
    } 


}, 

除了使用編號的回調，而不是字符串裁判，定義他們像

<div> 
    <form onSubmit={this.onSubmit}> 
     <input type="text" ref={(ip) => this.name=ip} placeholder="Contact Name"/> 
     <input type="text" ref={(ip) => this.phoneNumber=ip} placeholder="Phone Number"/> 
     <input type="submit" value="Add Contact"/> 
    </form> 
    </div> 

，並利用它們像

var name = this.name.value; 
    var phoneNumber = this.phoneNumber.value