使用平面列表多选项目答案

【问题标题】：Multi-select items with flatlist使用平面列表多选项目
【发布时间】：2020-02-13 20:23:29
【问题描述】：

我正在尝试实现一个多选的平面列表，但是当我按下一个项目时，它会改变所有项目的背景，我该如何解决这个问题？

state = {
        authUsers: [],
        selMembers: [],
        selected: false
    }

 render() {
    const renderUser = (item) => (
        <TouchableOpacity style={[styles.item, { backgroundColor: this.state.selected ? '#DDD' : '#FFF' }]} onPress={() => this.selectItem(item.key)}>
            <Avatar rounded size="medium" source={{ uri: item.avatar }} />
            <View>
                <Text style={styles.memberName}>{item.name}</Text>
            </View>
        </TouchableOpacity>
    )
    return (
        <View style={{ marginTop: StatusBar.currentHeight }}>
            <FlatList
                style={{ padding: 6 }}
                data={this.state.authUsers}
                keyExtractor={(item) => item.id}
                renderItem={({ item }) => renderUser(item)}
            />
        </View>
    )
  }

【问题讨论】：

标签： javascript reactjs react-native react-native-flatlist

【解决方案1】：

state = {
    authUsers: [{
        key: 1,
        item_name: 'AAA',
    },
    {
        key: 2,
        item_name: 'BBB',
    },
    {
        key: 3,
        item_name: 'CCC',
    },
    {
        key: 4,
        item_name: 'DDD',
    },]
}

selectItem(key) {
    let authUsers = [...this.state.authUsers]
    for (let item of authUsers) {
        if (item.key == key) {
            item.isSelected = (item.isSelected == null) ? true : !item.isSelected;
            break;
        }
    }
    this.setState({ authUsers });
}

render() {
    const renderUser = (item) => (
        <TouchableOpacity style={[styles.item, { backgroundColor: item.isSelected ? '#DDD' : '#FFF' }]} onPress={() => this.selectItem(item.key)}>
            <Avatar rounded size="medium" source={{ uri: item.avatar }} />
            <View>
                <Text style={styles.memberName}>{item.name}</Text>
            </View>
        </TouchableOpacity>
    )
    return (
        <View style={{ marginTop: StatusBar.currentHeight }}>
            <FlatList
                style={{ padding: 6 }}
                data={this.state.authUsers}
                keyExtractor={(item) => item.id}
                renderItem={({ item }) => renderUser(item)}
            />
        </View>
    )
}

【讨论】：