如何在 React 映射组件上进行独立样式更改

Question

我在尝试更改映射的 TouchableOpacity 的样式时遇到问题。

我映射了一个 TouchableOpacity 列表，我希望当我点击一个时，backgroundColor 改变（黑色）仅在我点击的那个上，但也重置我之前点击的另一个 TouchableOpacity 的 backgroundColor。

例如，如果我点击第一个 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 时，它们的背景颜色都会改变。

我只想定位一个并同时重置另一个

Answer 1

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

Answer 2

不确定这是否是解决问题的最佳方法，但我找到了使用直接操作的潜在解决方案

我首先为每个 TouchableOpacity 分配不同的引用，然后我定位该引用并使用 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'
      }
});

如何在 React 映射组件上进行独立样式更改

How to make independent style change on React mapped component

reactjs

react-native

react-component