启用时更改一种按钮的颜色

Question

所以当我点击一个心形按钮时，我想用心形按钮列出一个清单。

我只希望一个按钮更改颜色。并保存当前按钮的颜色状态。

我的问题是，当我点击一个心脏按钮时，所有按钮都会更改颜色。

屏幕截图：

这是我的代码

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

import { ListItem } from 'react-native-elements'
import { Icon } from 'react-native-elements'
import Data from './src/data/sampledata.json';

export default class App extends Component<Props> {
  constructor(props) {
    super(props);

    this.state = {
      buttonColor: '#979797', // default button color goes here, grey is default
    };
  }

  onButtonPress = () => {
    if(this.state.buttonColor=='#ff002b')
    {
      this.setState({ buttonColor: '#979797' }) // grey
    }
    else {
      this.setState({ buttonColor: '#ff002b' }) // red
    }
  }

  render() {
    return (
      <View style={styles.container}>
        {
          Data.map((item, i) => (
            <ListItem
              key={item.index}
              title={item.dataItem}
              rightIcon={
                <Icon
                raised
                name='heart'
                type='font-awesome'
                color={this.state.buttonColor}
                onPress={this.onButtonPress}
              />
            }
            />
          ))
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

Answer 1

实现此目的的一种方法如下：

您可以做的是跟踪数组中的选定项目。使用getUpdatedSelectedItemsArray函数可以得到一个包含所有选定项的数组，如下所示

const getUpdatedSelectedItemsArray = (selectedItems, id) => {
    const forDeletion = [id]; //can also be used for multiple ids
    if (selectedItems.includes(id)) {
        //if id already exists delete it
        return selectedItems.filter(item => !forDeletion.includes(item));
    } 
    //otherwise push it
    selectedItems.push(id);
    return selectedItems;
};

你甚至可以从上面的函数this.onButtonPress(item)这需要item作为参数。

//Creating state

this.state = {
      buttonColor: '#979797', 
      selectedItems: []
};

调用getUpdatedSelectedItemsArray()将为您提供更新的数组，您可以在selectedItems状态下进行设置。

最后，在为icon（item）提供颜色时，您将进行检查，如果item.id存在，this.state.selectedItems则显示红色，否则显示灰色，就像这样

Data.map((item, i) => (
            <ListItem
              key={item.index}
              title={item.dataItem}
              rightIcon={
                <Icon
                raised
                name='heart'
                type='font-awesome'
                color={this.checkIfIDExists(item.id) ? 'red' : 'grey'}
                onPress={this.onButtonPress}
              />
            }
            />
))

PS this.checkIfIDExists(item.id)是一个函数，true如果id在selectedItems数组中存在，则返回。