J'utilise la puissante flatlist de react native c'est mon tableau qui ressemble à ceci:
<TouchableOpacity
onPress={() => this._handleCategoryColor(index, item,objectname)}
style={[
styles.Buttoncolor,
this.state.selected.indexOf(item.label) != -1
? styles.onfocusbutton
: null,
]}>
<Text
style={[
styles.textcolor,
this.state.selected.indexOf(item.label) != -1
? styles.white
: null,
]}>
{item.label}
</Text>
</TouchableOpacity>
et voici ma flatlist
_handleclick = (index, item,objectname) => {
const {selected,result} = this.state
let selectedIndex = this.state.selected.indexOf(item.value);
if(selectedIndex == -1){
let my = this.state.result.filter((e)=>{return e[objectname]})
selected.forEach((items) => {
let arrayofattribute = result.filter((e)=>{return e[objectname]})
arrayofattribute.forEach((value,index)=>{
newval = value[objectname].map((val,i)=>{
if(items == val.label)
{
selected.splice(selected.indexOf(val.label),1)
}
})
})
})
this.setState({selected:[item.label,...this.state.selected]})
}
}
c'est la fonction où je correspond à l'index de l'élément ..
_handleclick = (index, item) => {
this.setState({selected: index+item.label, selectedColor: item.value})
}
voici ce que j'ai essayé: ->
j'appelle le clic de la main la fonction correspond à sa valeur avec l'index + le nom de l'étiquette et elle est modifiée elle-même mais quand je clique sur BLEU il change de couleur mais quand je clique sur PETIT il peut changer de lui-même mais le bleu obtient sa condition précédente
voici maintenant ce que je veux faire: ->
Je veux sélectionner un seul élément basé sur le tableau qui est 'Couleur ' Je veux que lorsque je clique sur BLEU, cela puisse changer la couleur. et si je clique aussi sur PETIT, il peut aussi changer de couleur lui-même que deux valeurs doivent être stockées.
J'espère que vous pourriez facilement comprendre. merci d'avance
MISE À JOUR 1
STATUT: RÉSOLU
Modifications
<FlatList data={data}
numColumns={1}
keyExtractor={(item, index) => index.toString()}
extraData={this.state}
ItemSeparatorComponent={FlatListItemSeparator}
renderItem={({item, index}) => {
return(
<View >
<Text >{Object.keys(item)}</Text>
<FlatList data={item[Object.keys(item)]}
numColumns={5}
keyExtractor={(index) => "D"+index.toString()}
extraData={this.state}
renderItem={({item, index}) => {
return(
<TouchableOpacity onPress={() => this._handleclick(index, item)} style={[
styles.Buttoncolor, this.state.selected == index+item.label
? styles.onfocusbutton
: null
]}>
<Text style={[styles.textcolor,this.state.selected == index+item.label?styles.white:null]}>{item.label}</Text>
</TouchableOpacity>
)
}
}/>
</View>)}}/>
dans le rendu Flatlist
data = [
{Color:[{'label':'BLUE','value':'10'}, {'label':'RED','value':'11'}]},
{Size:[{'label':'SMALL','value':'13'},{'label':'BIG','value':'12'}]}
]
3 Réponses :
vous pouvez essayer un tableau au lieu de stocker un seul élément sélectionné,
rendre l'état sélectionné comme un tableau vide lorsque vous déclarez.
_handleclick = (index, item) => {
let selectedIndex = this.state.selected.indexOf(index+item.label);
if(selectedIndex== -1){
this.setState({selected: [...this.state.selected,index+item.label], selectedColor: item.value})
}
}
voici votre méthode de gestion, push nouvel élément sélectionné dans le tableau sélectionné
...
<TouchableOpacity onPress={() => this._handleclick(index, item)} style={[
styles.Buttoncolor, this.state.selected.indexOf(index+item.label) != -1
? styles.onfocusbutton
: null
]}>
<Text style={[styles.textcolor, this.state.selected.indexOf(index+item.label) != -1?styles.white:null]}>{item.label}</Text>
</TouchableOpacity>
il sélectionne toute la valeur du tableau et ne peut même pas obtenir dans la condition précédente.et je veux en sélectionner un seul dans la couleur et une dans la taille, comment puis-je le faire
alors vous devez séparer sélectionné pour les deux, comme selectedColor et selectedSize. supprimer le tableau aussi.
Je ne peux pas le faire comme ça, votre approche est juste de prendre les valeurs sélectionnées dans le tableau, ce que je veux, mais une seule valeur par tableau
merci mec, j'ai fait mon travail en utilisant votre solution, vous pouvez vérifier mon message quels changements j'ai apportés au travail ...
Le problème vient probablement des attributions d'arguments de fonction. Si vous voyez les deux méthodes Faites-moi savoir si cela résout votre problème.
Bon codage. :) renderItem dans Flatlist utilise renderItem = {({item, index}) donc le dernier renderItem code > peut accéder à l'élément , index ci-dessus. Il y a une confusion lorsque onPress appelé, quel élément ou index mettre dans le rappel.
Veuillez essayer d'ajouter les différents noms d'argument. Comme <FlatList data={data}
numColumns={1}
keyExtractor={(item, index) => index.toString()}
extraData={this.state}
ItemSeparatorComponent={FlatListItemSeparator}
renderItem={({item, index}) => {
return(
<View >
<Text >{Object.keys(item)}</Text>
<FlatList data={item[Object.keys(item)]}
numColumns={5}
keyExtractor={(index) => "D"+index.toString()}
extraData={this.state}
renderItem={({set, key}) => {
return(
<TouchableOpacity onPress={() => this._handleclick(key, set)} style={[
styles.Buttoncolor, this.state.selected == index+item.label
? styles.onfocusbutton
: null
]}>
<Text style={[styles.textcolor,this.state.selected == index+item.label?styles.white:null]}>{item.label}</Text>
</TouchableOpacity>
)
}
}/>
</View>)}}/>
non ce n'est pas ... ça donne une erreur que set.label n'est pas une fonction et lisez d'abord la question ce que je veux faire merci ..
@Tanveerbyn chill bro, avec cette attitude, vous ne serez pas beaucoup aidé.
Ce n'est pas grave, mais soyez toujours poli, surtout si quelqu'un prend son temps pour vous aider.
Si j'ai bien compris, vous devez sélectionner une seule option pour chaque propriété (couleurs et tailles). Vous devez donc avoir un champ dans votre état pour chaque élément que vous souhaitez enregistrer.
Votre fonction _handleClick pourrait être quelque chose comme ceci:
<TouchableOpacity
onPress={() => this._handleclick(index, item)}
style={[
styles.Buttoncolor,
this.state.selectedSize == index + item.label ||
this.state.selectedColor == index + item.label
? styles.onfocusbutton
: null,
]}>
<Text
style={[
styles.textcolor,
this.state.selectedSize == index + item.label ||
this.state.selectedColor == index + item.label
? styles.white
: null,
]}>
{item.label}
</Text>
</TouchableOpacity>
Chaque fois que vous cliquez sur un élément, vous devez savoir s'il s'agit d'une couleur ou d'une taille, puis mettre à jour correctement le bon champ. Ce n'est peut-être pas la méthode la plus performante, mais cela fonctionne.
Ensuite, dans votre méthode de rendu, pour attribuer un style, vous pouvez vérifier les deux conditions:
_handleclick = (index, item) => {
const { Color } = this.state.data[0];
const { Size } = this.state.data[1];
this.setState(state => ({
selectedColor: Color.find(color => color.label === item.label)
? index + item.label
: state.selectedColor,
selectedSize: Size.find(size => size.label === item.label)
? index + item.label
: state.selectedSize,
}));
};
J'ai essayé de reproduire votre question dans cette collation , vous pouvez prendre un regardez.
sry mais j'ai besoin de le faire de manière dynamique «Couleur» c'est une approche fixe que j'ai fait précédemment, je dois le faire sur du contenu dynamique, c'est pourquoi .. et je veux que toutes les valeurs sélectionnées dans un tableau btw que pour votre réponse. .