react-native - 如何只改变事件按钮的背景颜色[React-Native]

Question

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

class App extends Component {
  constructor(props){
    super(props)
    this.state={
      selected:null
    }
  }

  handle=()=>{
    this.setState({selected:1})
  }

  render() {
    return (
      <View>
        <TouchableOpacity style={[styles.Btn, {backgroundColor:this.state.selected===1?"green":"white"}]} onPress={this.handle}>
          <Text style={styles.BtnText}>Button 1</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.Btn} onPress={this.handle}>
          <Text style={styles.BtnText}>Button 2</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.Btn} onPress={this.handle}>
          <Text style={styles.BtnText}>Button 3</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  Btn: {
    borderWidth: 1,
    width: 100,
    height: 20,
    borderRadius: 8,
    margin: 5,
    padding: 10,

    justifyContent: 'center',
    flexDirection: 'row',
    alignItems: 'center',
  },

  BtnText: {
    fontSize: 15,
  },
});

export default App;

小吃链接:https://snack.expo.dev/U_fX-6Tao-

我想这样做，当我单击一个按钮时，事件按钮的 backgroundColor 应更改为“绿色”，文本应更改为“白色”，其余按钮的 backgroundColor 和 textColor 应保持为“红色”。但是，当我单击另一个按钮时，该按钮应该变为事件状态，而之前的事件按钮应该恢复到正常状态。

我是 React Native 的新手，如果你也能解释一下它背后的逻辑就太好了。

谢谢。

Answer 1

您总是将事件按钮设置为第一个。另外，我会使用数组来呈现按钮。我会做这样的事情:

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      selected: null
    }
  }

  handlePress = (item) => {
    this.setState({ selected: item })
  }

  render() {
    return (
      <View>
        {[...Array(3).keys()].map((item) => {
          return (
            <TouchableOpacity key={item} style={[styles.Btn, {backgroundColor: this.state.selected === item ? "green" : "white" }]} onPress={() => this.handlePress(item)}>
              <Text style={styles.BtnText}>Button {item + 1}</Text>
            </TouchableOpacity>
          )
        })}
      </View>
    );
  }
}