Мульти-выбор предметов с плоским списком - PullRequest
Новая
       6

Мульти-выбор предметов с плоским списком

0 голосов
/ 13 февраля 2020

Я пытаюсь реализовать плоский список с множественным выбором, но когда я нажимаю на элемент, он меняет фон для всех элементов, как я могу это исправить? 

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>
    )
  }

1 Ответ

0 голосов
/ 14 февраля 2020 
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>
    )
}
...