2
votes

comment changer l'arrière-plan d'une opacité tactile dans l'itération

Je suis en train de boucler un tableau, enveloppant chaque élément dans touchableOpacity, essayant de changer la couleur d'arrière-plan de l'élément cliqué sur l'événement onPress, mon problème est que cela change la couleur d'arrière-plan de l'ensemble des éléments, y a-t-il un moyen de changer la couleur d'arrière-plan uniquement pour l'élément cliqué, voici mon code

 return this.props.categes.map( (

            cat,i)=>

            <TouchableOpacity onPress = {() => this.changeBackground(i)} key = {i} style={{alignSelf : 'center', paddingLeft: 5, paddingRight : 7, paddingTop : 5, paddingBottom : 5, backgroundColor : this.state.background}}>
            <Text style={{color : '#838D8D'}}> {cat.name}</Text>
            </TouchableOpacity>

            )

  changeBackground(item){

        if(item)
        {
            this.setState({
                background: 'red'
            })
        }
    }

javascript react-native

0 commentaires

3 Réponses :

0
votes

Vous devez faire référence directement à cat et index , pour cela vous devez envoyer le Event.target cela devrait fonctionner comme cet exemple: Je distribue un événement onPress , vous devriez avoir accès au event.target à l'intérieur de la fonction de gestionnaire onPress.

return this.props.categes.map( (

            cat,i)=>

            <TouchableOpacity onPress = {event => this.changeBackground(i)} key = {i} style={{alignSelf : 'center', paddingLeft: 5, paddingRight : 7, paddingTop : 5, paddingBottom : 5, backgroundColor : this.state.background}}>
            <Text style={{color : '#838D8D'}}> {cat.name}</Text>
            </TouchableOpacity>

            )

  changeBackground(event){

     //Here you should be able to check the touched object:

     console.log('Here is the touched cat: ', event.target)

    }

3 commentaires

merci Natasha, donc en appelant this.changeBackground Je devrais aussi passer l'événement?

Je pense qu'il manque encore quelque chose car je change l'état d'un composant toute propriété est à l'intérieur de ce composant appelle cet état qu'il sera affecté

Je ne sais pas ce que tu veux dire. Pouvez-vous fournir un contexte ou reformuler un peu votre question? Merci

0
votes

Votre code modifie la couleur de tous les éléments car il ne parvient pas à identifier de manière unique l'élément sur lequel vous avez cliqué. La couleur que vous changez n'est pas associée à un élément particulier.

Il existe de nombreuses façons de résoudre le problème. Voici une façon de créer un composant distinct pour chaque élément, afin que chacun de ces éléments ait son propre état.

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

export default class App extends React.Component {
  render() {
    let listOfItems = [1, 2, 3, 4, 5, 6, 7, 8, 9];

    return (
      <View style={styles.container}>
        {listOfItems.map(e => {
          return <ToggleButton key={e + "i"} />;
        })}
      </View>
    );
  }
}

class ToggleButton extends Component {
  state = {
    on: false
  };

  render() {
    const { on } = this.state;

    return (
      <TouchableOpacity
        onPress={() => this.setState({ on: !this.state.on })}
        style={{ height: 50, width: 50, backgroundColor: on ? "green" : "red" }}
      >
        <Text>ITEM</Text>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

0 commentaires

1
votes

Hé, j'ai fait cet exemple et j'espère que cela résoudra votre problème. Trouvez l'exemple de travail ici. ( https://snack.expo.io/@shrutigarg/touchableopacity-background-change-onclick )

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      categes: [
        { cat_id: '1', cat_name: 'abc', backgroundcolor: '#ED2525' },
        { cat_id: '2', cat_name: 'xyz', backgroundcolor: '#ED2525' },
        { cat_id: '3', cat_name: 'pqr', backgroundcolor: '#ED2525' },
        { cat_id: '4', cat_name: 'uvw', backgroundcolor: '#ED2525' },
        { cat_id: '5', cat_name: 'hij', backgroundcolor: '#ED2525' },
      ],
      change: false,
    };
  }

  changeBackground = item => {
    let categes = JSON.parse(JSON.stringify(this.state.categes));

    for (let x = 0; x < this.state.categes.length; x++) {
      if (this.state.categes[x].cat_id == item.cat_id) {
        categes[x].backgroundcolor = '#0000FF';

        this.setState({
          categes: categes,
        });
      } else {
        categes[x].backgroundcolor = '#ED2525';

        this.setState({
          categes: categes,
        });
      }
    }
  };
  render() {
    return (
      <View style={styles.container}>
        {this.state.categes.map((item, key) => (
          <TouchableOpacity
            style={{
              width: 200,
              height: 60,
              alignItems: 'center',
              justifyContent: 'center',
              margin: 10,
              backgroundColor: item.backgroundcolor,
            }}
            onPress={() => this.changeBackground(item)}>
            <Text style={{ color: '#FFFFFF' }}>
              {' '}
              {item.cat_name.toUpperCase()}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
    alignItems: 'center',
  },
});

0 commentaires