Question

我正在循环一个数组，将每个项目包装到touchableOpacity中，尝试更改onPress事件上单击的项目的背景颜色，我的问题是它更改了整个项目的背景颜色，是否有办法将背景颜色更改为仅单击的项目，这是我的代码

 return this.props.categes.map( (

            cat,i)=>

            <TouchableOpacity onPress = {() => this.changeBackground(i)} key = {i} style={{alignSelf : 'center', paddingLeft: 5, paddingRight : 7, paddingTop : 5, paddingBottom : 5, backgroundColor : this.state.background}}>
            <Text style={{color : '#838D8D'}}> {cat.name}</Text>
            </TouchableOpacity>

            )

  changeBackground(item){

        if(item)
        {
            this.setState({
                background: 'red'
            })
        }
    }

Answer 1

您需要直接引用cat和index，因为您应该发送Event.target，它应该像以下示例一样工作：我正在调度事件onPress，您应该可以访问 event.target位于onPress处理函数中。

return this.props.categes.map( (

            cat,i)=>

            <TouchableOpacity onPress = {event => this.changeBackground(i)} key = {i} style={{alignSelf : 'center', paddingLeft: 5, paddingRight : 7, paddingTop : 5, paddingBottom : 5, backgroundColor : this.state.background}}>
            <Text style={{color : '#838D8D'}}> {cat.name}</Text>
            </TouchableOpacity>

            )

  changeBackground(event){

     //Here you should be able to check the touched object:

     console.log('Here is the touched cat: ', event.target)

    }

Answer 2

您的代码更改了所有项目的颜色，因为它无法唯一标识您单击的项目。您要更改的颜色与特定项目无关。

有很多方法可以解决问题。这是我为每个项目创建单独的组件的一种方法，因此每个项目都有自己的状态。

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

export default class App extends React.Component {
  render() {
    let listOfItems = [1, 2, 3, 4, 5, 6, 7, 8, 9];

    return (
      <View style={styles.container}>
        {listOfItems.map(e => {
          return <ToggleButton key={e + "i"} />;
        })}
      </View>
    );
  }
}

class ToggleButton extends Component {
  state = {
    on: false
  };

  render() {
    const { on } = this.state;

    return (
      <TouchableOpacity
        onPress={() => this.setState({ on: !this.state.on })}
        style={{ height: 50, width: 50, backgroundColor: on ? "green" : "red" }}
      >
        <Text>ITEM</Text>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

Answer 3

嘿，我已经举了这个例子，希望能解决您的问题。在这里找到有效的例子。（https://snack.expo.io/@shrutigarg/touchableopacity-background-change-onclick）

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

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      categes: [
        { cat_id: '1', cat_name: 'abc', backgroundcolor: '#ED2525' },
        { cat_id: '2', cat_name: 'xyz', backgroundcolor: '#ED2525' },
        { cat_id: '3', cat_name: 'pqr', backgroundcolor: '#ED2525' },
        { cat_id: '4', cat_name: 'uvw', backgroundcolor: '#ED2525' },
        { cat_id: '5', cat_name: 'hij', backgroundcolor: '#ED2525' },
      ],
      change: false,
    };
  }

  changeBackground = item => {
    let categes = JSON.parse(JSON.stringify(this.state.categes));

    for (let x = 0; x < this.state.categes.length; x++) {
      if (this.state.categes[x].cat_id == item.cat_id) {
        categes[x].backgroundcolor = '#0000FF';

        this.setState({
          categes: categes,
        });
      } else {
        categes[x].backgroundcolor = '#ED2525';

        this.setState({
          categes: categes,
        });
      }
    }
  };
  render() {
    return (
      <View style={styles.container}>
        {this.state.categes.map((item, key) => (
          <TouchableOpacity
            style={{
              width: 200,
              height: 60,
              alignItems: 'center',
              justifyContent: 'center',
              margin: 10,
              backgroundColor: item.backgroundcolor,
            }}
            onPress={() => this.changeBackground(item)}>
            <Text style={{ color: '#FFFFFF' }}>
              {' '}
              {item.cat_name.toUpperCase()}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
    alignItems: 'center',
  },
});

如何在迭代中更改touchableOpacity的背景

3 个答案: