Как сделать независимое изменение стиля в отображенном компоненте React

Question

У меня проблема при попытке изменить стиль сопоставленной TouchableOpacity.

Я отображаю список TouchableOpacity, и мне хотелось бы, чтобы при нажатии на одну из них фоновое изменение цвета (в черном цвете) только ная нажал, но также для сброса backgroundColor другой TouchableOpacity, которую я щелкнул ранее.

Так, например, если я нажму на первую TouchableOpacity, фон этого станет черным.И после, если я нажимаю на второй, фон второго становится черным, а фон первого снова становится серым.

export default class Playground extends Component {
      state = {
            isPressed: false
      };

      handlePress = () => {
            this.setState({
                  isPressed: !this.state.isPressed
            });
      };

      render() {
            let array = [0, 1, 2];
            return (
                  <View style={styles.container}>
                        <Text>Test</Text>
                        {array.map(item => {
                              return (
                                    <TouchableOpacity
                                          key={item}
                                          style={this.state.isPressed ? styles.buttonPressed : styles.button}
                                          onPress={this.handlePress}
                                    >
                                          <Text>Click on it</Text>
                                    </TouchableOpacity>
                              );
                        })}
                  </View>
            );
      }
}

const styles = StyleSheet.create({
      container: {
            flex: 1,
            backgroundColor: '#fff',
            alignItems: 'center',
            justifyContent: 'center',
            marginTop: 50
      },
      button: {
            backgroundColor: 'grey'
      },
      buttonPressed: {
            backgroundColor: 'black'
      }
});

Это то, что я пытался, но когда я нажимаю на один TouchableOpacity, backgroundColorиз них все меняются.

Я хотел бы нацелиться только на одного и сбросить другой одновременно

Answer 1

Не уверен, что это лучший способ решить проблему, но я нахожу потенциальное решение с помощью прямых манипуляций

Я начинаю с того, что присваиваю разные ссылки каждой TouchableOpacity и после того, как нацеливаю этот ref и использую setNativeProps дляизменить стиль цели

export default class Playground extends Component {
      state = {
            daySelected: null
      }

      handlePress = (day, i) => {
            if (this.state.daySelected !== null) {
                  this.state.daySelected.setNativeProps({
                        backgroundColor: 'grey'
                  });
            }

            this.setState({
                  daySelected: day
            });

            day.setNativeProps({
                  backgroundColor: 'black'
            });
      };

      render() {
            let array = [0, 1, 2];
            return (
                  <View style={styles.container}>
                        <Text>Test</Text>
                        {array.map(i => {
                              return (
                                    <TouchableOpacity
                                          key={i}
                                          ref={thisItem => (this[`item-${i}`] = thisItem)}
                                          style={styles.button}
                                          onPress={() => this.handlePress(this[`item-${i}`], i)}
                                    >
                                          <Text>Click on it</Text>
                                    </TouchableOpacity>
                              );
                        })}
                  </View>
            );
      }
}

const styles = StyleSheet.create({
      container: {
            flex: 1,
            backgroundColor: '#fff',
            alignItems: 'center',
            justifyContent: 'center',
            marginTop: 50
      },
      button: {
            backgroundColor: 'grey'
      }
});

Answer 2

---

it's good working

---

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


export default class Playground extends Component {
  state = {
    isPressed: false
  };

  handlePress = () => {
    this.setState({
      isPressed: !this.state.isPressed
    });
  };

  render() {
    let array = \[0, 1, 2\];
    return (
      <View style={styles.container}>
        <Text>Test</Text>
        {array.map(item => {
          return (
            <TouchableOpacity
              key={item}
              style={this.state.isPressed === false ? styles.buttonPressed : styles.button}
              onPress={this.handlePress}
            >
              <Text>Click on it</Text>
            </TouchableOpacity>
          );
        })}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 50
  },
  button: {
    backgroundColor: 'grey'
  },
  buttonPressed: {
    backgroundColor: 'black'
  }
});