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

我有15个按钮，如果按下，我想改变它们的颜色。每个按钮都有一个字符串，它是关键字，“toggleKeyword（）”函数帮助将其添加到列表中，如果它在列表中，我只想更改颜色。由于使用状态太难，有没有办法达到特定的按钮来更改其颜色。我试图使用event.target，但它只返回整数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>

this.toggleKeyword（“深度”）}>
深度

我根据要求制作了一个样品

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

import React，{Component}来自“React”；
从“react native”导入{文本、视图、样式表、TouchableOpacity}；
常量关键字=[“A”、“B”、“C”、“D”、“E”、“F”、“G”、“H”、“I”]；
导出默认类应用程序扩展组件{
状态={
关键字列表：[]，
};
toggleKeyword=（关键字）=>{
const{keywordsList}=this.state；
let list=关键字列表；
设指数=-1；
如果（（索引=关键字列表。索引（关键字））！=-1）{
拼接列表（索引，1）；
}否则{
列表推送（关键字）；
}
this.setState（{keywordsList:list}）；
};
render（）{
const{keywordsList}=this.state；
const{container，selectedKeywordStyle，buttonStyle，textStyle}=styles；
返回(
{关键字.map（（项）=>(
元素==项）？selectedKeywordStyle:buttonStyle}
onPress={（）=>this.toggleKeyword（项）}
>
{item}
))}
);
}
}
const styles=StyleSheet.create({
容器：{
flexDirection:“行”，
为内容辩护：“周围的空间”，
柔性包装：“包装”，
paddingTop:50，
},
文本样式：{
尺寸：16，
填充：8，
textAlign：“居中”，
},
按钮样式：{
宽度：“30%”，
背景颜色：“灰色”，
边界半径：15，
差额：5，
},
selectedKeywordStyle：{
宽度：“30%”，
背景颜色：“绿色”，
边界半径：15，
差额：5，
},
});

---

希望这对你有帮助。请不要怀疑。

每个按钮的实际颜色设置在哪里？这就是我向人们提出的要求。我该怎么做呢？是的，我想这会对我有帮助，但我想问你一个问题，我把我的按钮放在3x5的位置，每行显示三个按钮，然后重复5列。如何映射这样的项目？@Atakan根据您的新要求修改了答案。