react-native - 在列表中按下时更改一个按钮颜色

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}
              />
            }
            />
))

附注 this.checkIfIDExists(item.id)是一个返回 true 的函数如果 id 存在于 selectedItems 数组中。