在 React-Native 中使用 key 或 ref

Question

所以，我在 react-native 中使用循环时遇到问题，主要与如何更新默认值广告有关，如果我循环许多文本输入，则如何获取文本输入的每个值。我在想解决方案是使用密钥，但我不确定如何将其实现到代码中。或者我们可以使用 ref?

所以问题的细节是这样的：循环中的noGuest是用户输入的，最多4个guest。基于每个循环内的下拉值，我想通过设置状态直接用现有数据更新当前索引中的所有字段。但是因为我不知道怎么用key，所以当我selectGuest 1下拉的一个选项时，ALL fields（包括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

Use key or ref in React-Native

loops

key

react-native