Ce code React Native fonctionne bien avec la modification du style du bouton au clic. Je veux qu'il puisse également changer le nom du bouton en nombres de la liste définie KEYNOS (au lieu d'afficher le A, B, C...etc, je veux qu'il le remplace par 1, 2, 3...etc). pour créer une nouvelle liste de nombres et utiliser la carte pour la parcourir.

import React, { Component } from "react";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";

const KEYWORDS = ["A", "B", "C", "D", "E", "F", "G", "H", "I"];
const KEYNOS = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
export default class App extends Component {
state = {
    keywordsList: [],
    keynosList: [],
};

toggleKeyword = (keyword) => {
    const { keywordsList } = this.state;
    let list = keywordsList;
    let index = -1;
    if ((index = keywordsList.indexOf(keyword)) != -1) {
        list.splice(index, 1);
    } else {
        list.push(keyword);
    }
    this.setState({ keywordsList: list });
};
toggleKeyno = (keyno) => {
    const { keynosList } = this.state;
    let list = keynosList;
    let index = -1;
    if ((index = keynosList.indexOf(keyno)) != -1) {
        list.splice(index, 1);
    } else {
        list.push(keyno);
    }
    this.setState({ keynosList: list });
}
render() {
    const { keywordsList } = this.state;
    const { container, selectedKeywordStyle, buttonStyle, textStyle } = styles;
    return (
        <View style={container}>
            {KEYNOS, KEYWORDS.map((item) => (
                <TouchableOpacity
                    style={keywordsList.find((element) => element == item) ? selectedKeywordStyle : buttonStyle}
                    onPress={() => this.toggleKeyword(item)}
                >
                    <Text style={textStyle}>{item}</Text>
                </TouchableOpacity>
            ))}
        </View>
    );
}
}

const styles = StyleSheet.create({
container: {
    flexDirection: "row",
    justifyContent: "space-around",
    flexWrap: "wrap",
    paddingTop: 50,
},
textStyle: {
    fontSize: 16,
    padding: 8,
    textAlign: "center",
},
buttonStyle: {
    width: "30%",
    backgroundColor: "gray",
    borderRadius: 15,
    margin: 5,
},
selectedKeywordStyle: {
    width: "30%",
    backgroundColor: "blue",
    borderRadius: 15,
    margin: 5,
},
});
0
HowardJohn 7 sept. 2020 à 13:26

1 réponse

Meilleure réponse

Utilisez simplement la même condition que vous avez déjà mais passez également le 2ème argument pour map pour attacher l'index afin que vous puissiez corréler les KEYWORDS avec KEYNOS

{
  KEYWORDS.map((item, index) => (
    <TouchableOpacity
      style={
        keywordsList.find((element) => element == item)
          ? selectedKeywordStyle
          : buttonStyle
      }
      onPress={() => this.toggleKeyword(item)}
    >
      <Text style={textStyle}>
        {keywordsList.find((element) => element == item)
          ? KEYNOS[index]
          : item}
      </Text>
    </TouchableOpacity>
  ))
}

Vous pouvez également réduire la complexité temporelle en minimisant les itérations

{
  KEYWORDS.map((item, index) => {
    let style, text;

    if (keywordsList.find((element) => element === item)) {
      style = selectedKeywordStyle;
      text = KEYNOS[index];
    } else {
      style = buttonStyle;
      text = item;
    }

    return (
      <TouchableOpacity
        key={index} // make sure you assign a unique key for each item
        style={style}
        onPress={() => this.toggleKeyword(item)}
      >
        <Text style={textStyle}>{text}</Text>
      </TouchableOpacity>
    );
  })
}
0
95faf8e76605e973 7 sept. 2020 à 10:54