如何在 React Native 中按下时更改多个按钮的颜色

Question

我有 15 个按钮，我想在按下时更改它们的颜色。每个按钮都有一个字符串，它是关键字，"toggleKeyword()" 函数有助于将其添加到列表中，如果它在列表中，我只想更改颜色。使用状态太难了，有什么方法可以到达特定按钮以更改其颜色。我尝试使用 event.target 但它的 return 只是整数 ID。我应该添加什么代码来管理它？

 toggleKeyword(keyword){
        var list = this.state.keywordsList;
        var index = -1;
        if((index =list.indexOf(keyword)) != -1){
            list.splice(index,1);
        }else {
            list.push(keyword);
        }
        return this.setState({keywordsList:list});
    }

这就是其中之一。

<TouchableOpacity style={{backgroundColor:'white',borderRadius:15}} onPress={_ => this.toggleKeyword("depth")}>
                    <Text style={{color:"black",fontSize:20,padding:8}}>depth</Text>
</TouchableOpacity>

Answer 1

我按照要求做了一个样品

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

const KEYWORDS = ["A", "B", "C", "D", "E", "F", "G", "H", "I"];

export default class App extends Component {
  state = {
    keywordsList: [],
  };

  toggleKeyword = (keyword) => {
    const { keywordsList } = this.state;
    let list = keywordsList;
    let index = -1;
    if ((index = keywordsList.indexOf(keyword)) != -1) {
      list.splice(index, 1);
    } else {
      list.push(keyword);
    }
    this.setState({ keywordsList: list });
  };

  render() {
    const { keywordsList } = this.state;
    const { container, selectedKeywordStyle, buttonStyle, textStyle } = styles;
    return (
      <View style={container}>
        {KEYWORDS.map((item) => (
          <TouchableOpacity
            style={keywordsList.find((element) => element == item) ? selectedKeywordStyle : buttonStyle}
            onPress={() => this.toggleKeyword(item)}
          >
            <Text style={textStyle}>{item}</Text>
          </TouchableOpacity>
        ))}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    justifyContent: "space-around",
    flexWrap: "wrap",
    paddingTop: 50,
  },
  textStyle: {
    fontSize: 16,
    padding: 8,
    textAlign: "center",
  },
  buttonStyle: {
    width: "30%",
    backgroundColor: "gray",
    borderRadius: 15,
    margin: 5,
  },
  selectedKeywordStyle: {
    width: "30%",
    backgroundColor: "green",
    borderRadius: 15,
    margin: 5,
  },
});

希望对您有所帮助。有疑问欢迎留言。

如何在 React Native 中按下时更改多个按钮的颜色

How to change multiple buttons color when pressed in React Native

javascript

button

reactjs

react-native

touchableopacity