Question

所以，我遇到了在react-native中使用循环的问题，主要与如何更新默认值ad相关，如果我循环许多文本输入，则获取文本输入的每个值。我认为解决方案是使用密钥，但我不知道如何将其实现到代码中。或者也许我们可以使用ref？

所以问题的细节是这样的：循环中的noGuest是由用户输入的，最多可以有4个guest。根据每个循环中的下拉值，我想通过设置状态直接用现有数据更新当前索引中的所有字段。但由于我不知道如何使用密钥，当我在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;
}

在React-Native中使用key或ref

1 个答案: