在React-Native中使用鍵或引用

Question

所以，我在使用react-native中的循環時遇到問題，主要與如何更新默認值以及如何循環許多文本輸入來獲取文本輸入的每個值有關。我認爲解決方案是使用密鑰，但我不知道如何實現它的代碼。或者，也許我們可以使用ref？

所以問題的細節是這樣的：循環中的noGuest是由用戶輸入的，最多4位客人。根據每個循環內的下拉值，我想通過設置狀態直接更新當前索引中的所有字段與現有數據。但是因爲我不知道如何使用密鑰，所以當我在Guest 1的下拉列表中選擇一個選項時，實際上所有字段（包括Guest 2，Guest 3，Guest 4）都會使用現有數據進行更新。如果我設法解決上一個問題，那麼獲取每個文本輸入的價值可能非常簡單。

constructor(props) { 
    super(props); 
    this.state = { 
     guestInfo: '', 
     first_name: '', 
     last_name: '', 
    }; 
} 
onGuestNameChange(guestName) { 
    console.log('executing onGuestNameChange'); 
    let guest = guestName.value; 
    var len = guest_profile.length; 
    for (let i = 0; i < len; i++) { 
     let row = guest_profile[i]; 
     console.log(row.first_name); 
     if(row.first_name == guest) { 
      this.setState({ 
       first_name : row.first_name, 
       last_name : row.last_name, 
      }); 
     } 
    } 
    var guestInfo = this.generateguestInfoField(); 
    this.setState({guestInfo : guestInfo}); 
} 
generateguestInfoField() { 
    var noGuest = this.state.guest; 
    var guestInfo = []; 
    for(let i = 1; i < noGuest; i++){ 
     guestInfo.push(
      <View style={styles.guestFormField} key = {i}> 
       <View style={styles.guestTitle}> 
        <Text style={{fontSize: 16, color:'black'}}>Guest {i}</Text> 
        <Dropdown style={{ height: 20, width: 150}} 
        values={guest_name} selected={0} 
        onChange={this.onGuestNameChange.bind(this)} /> 
       </View> 
       <View style={styles.guestInput}> 
        <Text style={styles.guestLabel}>First Name</Text> 
        <View style={styles.guestFieldBox}> 
         <TextInput 
          style={styles.guestField} 
          underlineColorAndroid={'white'} 
          defaultValue={this.state.first_name} 
         /> 
        </View> 
       </View> 
       <View style={styles.guestInput}> 
        <Text style={styles.guestLabel}>Last Name</Text> 
        <View style={styles.guestFieldBox}> 
         <TextInput 
          style={styles.guestField} 
          underlineColorAndroid={'white'} 
          defaultValue={this.state.last_name} 
         /> 
        </View> 
       </View> 
      </View> 
     ) 
    } 
    return guestInfo; 
} 

任何建議是豐富的讚賞。謝謝。

Answer 1

我不都在你的組件代碼的，但是從我所知道的，這樣的事情應該解決您的問題：

constructor(props) { 
    super(props); 
    this.state = { 
     guestInfo: '', 
     guests: [] 
    }; 
} 
onGuestNameChange(guestName, i) { 
    console.log('executing onGuestNameChange'); 
    let guest = guestName.value; 
    let guests = [] 
    var len = guest_profile.length; 
    for (let i = 0; i < len; i++) { 
     let row = guest_profile[i]; 
     console.log(row.first_name); 
     if(row.first_name == guest) { 
      guests.push(row) 
     } 
    } 
    this.setState({ 
     guestInfo : guestInfo, 
     guests: guests 
    }) 
    var guestInfo = this.generateguestInfoField(); 

} 

generateguestInfoField() { 
    var noGuest = this.state.guest; 
    var guestInfo = []; 
    for(let i = 1; i < noGuest; i++){ 
     guestInfo.push(
      <View style={styles.guestFormField} key = {i}> 
       <View style={styles.guestTitle}> 
        <Text style={{fontSize: 16, color:'black'}}>Guest {i}</Text> 
        <Dropdown style={{ height: 20, width: 150}} 
        values={guest_name} selected={0} 
        onChange={this.onGuestNameChange.bind(this, i)} /> 
       </View> 
       <View style={styles.guestInput}> 
        <Text style={styles.guestLabel}>First Name</Text> 
        <View style={styles.guestFieldBox}> 
         <TextInput 
          style={styles.guestField} 
          underlineColorAndroid={'white'} 
          defaultValue={this.state.guests[i].first_name} 
         /> 
        </View> 
       </View> 
       <View style={styles.guestInput}> 
        <Text style={styles.guestLabel}>Last Name</Text> 
        <View style={styles.guestFieldBox}> 
         <TextInput 
          style={styles.guestField} 
          underlineColorAndroid={'white'} 
          defaultValue={this.state.guests[i].last_name} 
         /> 
        </View> 
       </View> 
      </View> 
     ) 
    } 
    return guestInfo; 
}