Как изменить цвет нескольких кнопок при нажатии в React Native - PullRequest
Новая
       98

Как изменить цвет нескольких кнопок при нажатии в React Native

0 голосов
/ 01 мая 2020

У меня 15 кнопок, и я хочу изменить их цвет при нажатии. Каждая кнопка имеет строку, являющуюся ключевым словом, и функция «toggleKeyword ()» помогает добавить ее в список, и если ее в списке, я просто хочу изменить цвет. С использованием состояния слишком сложно, есть ли какой-нибудь способ получить указанную кнопку c, чтобы изменить ее цвет. Я пытался использовать event.target, но он возвращает только целочисленный идентификатор. Что я должен добавить код для управления этим? 

 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>

1 Ответ

1 голос
/ 01 мая 2020

Я сделал образец в соответствии с требованием. 

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

Надеюсь, это поможет вам. Не стесняйтесь сомнений.

...