在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; 
}