Question

我使用 data.map() 方法创建了一个列表，但我面临的问题是它只选择一个项目，但我希望它从列表中选择多个项目。我不明白该怎么做。我之前创建了那种列表，所以用户只能从列表中选择一个项目，但我正在努力让它选择多个项目。有人可以帮忙吗？下面是我的代码

const [state, setState] = useState({
    isLoading: false,
    isClicked: false,
    selectedIndex: -1,
  });
  const {isClicked, isLoading, selectedIndex} = state;

  const Amenties = ({item, id, callBack}) => {
    const clicked = selectedIndex === id;
    return (
      <View style={styles.amenities}>
        <View style={{flexDirection: 'row', alignItems: 'center'}}>
          <Image source={item.image} />
          <Text
            style={{
              ...commonStyles.fontSize15,
              color: colors.themeColor,
              marginLeft: moderateScale(16),
            }}>
            {item.amenities}
          </Text>
        </View>
        {clicked ? (
          <TouchableOpacity
            onPress={() => {
              callBack(id);
            }}>
            <Image
              source={imagePath.checkboxActive}
              style={{
                width: moderateScale(18),
                height: moderateScaleVertical(18),
                borderRadius: moderateScale(18 / 2),
              }}
            />
          </TouchableOpacity>
        ) : (
          <TouchableOpacity
            onPress={() => {
              callBack(id);
            }}
            style={{
              width: moderateScale(18),
              height: moderateScaleVertical(18),
              backgroundColor: colors.blackOpacity15,
              borderRadius: moderateScale(18 / 2),
            }}
          />
        )}
      </View>
    );
  };

数据是

const Top_Amenities = [
    {
      id: 1,
      amenities: 'Wifi',
      image: imagePath.wifiIcon,
    },
    {
      id: 2,
      amenities: 'Air Conditioner',
      image: imagePath.airConditionerIcon,
    },
    {
      id: 3,
      amenities: 'Printer',
      image: imagePath.printerIcon,
    },
]

映射数据

  {Other_Amenities.map((data, id) => (
            <Amenties
              item={data}
              id={data.id.toString()}
              callBack={(id) => setState({selectedIndex: id})}
            />
          ))}

有人可以帮忙吗

Answer 1

您需要将列表的 id 存储在一个数组中，您需要为每个选定的列表项维护一个索引状态，将索引状态设置为默认 0。完整更新代码

import React, {Component, useState} from 'react';
import {
  View,
  StyleSheet,
  Text,
  Image,
  FlatList,
  TouchableOpacity,
  ScrollView
} from 'react-native';

function AddAmenties({navigation}) {
  const [state, setState] = useState({
    isLoading: false,
    isClicked: false,
    selectedIndex: [],
    index: 0,
  });
  const {isClicked, isLoading, selectedIndex, index} = state;
  
  const Amenties = ({item, id, callBack}) => {
    var color = "grey"
    if(selectedIndex[1] && selectedIndex.includes(id)){
      color ="blue"
    } else if(selectedIndex[0] === id){
      color = "blue"
    }
    return (
      <View style={styles.amenities}>
        <View style={{flexDirection: 'row', alignItems: 'center'}}>
          <Text
            style={{
           
             
              marginLeft: 16,
            }}>
            {item.amenities}
          </Text>
        </View>
        { (
          <TouchableOpacity
            onPress={() => {
              callBack(id);
            }}
            style={{
              width: 18,
              height: 18,
              backgroundColor:color,
              borderRadius: 18/2,
            }}
          />
        )}
      </View>
    );
  };

  const Top_Amenities = [
    {
      id: 1,
      amenities: 'Wifi',
      
    },
    {
      id: 2,
      amenities: 'Air Conditioner',
   
    },
    {
      id: 3,
      amenities: 'Printer',
   
    },
    {
      id: 4,
      amenities: 'Food',
     
    },
    {
      id: 5,
      amenities: 'Coffee',
    
    },
  ];

 
  const selectedItem = (id) => {
    
    if (selectedIndex == 0) {
      setState({selectedIndex:[ id], index: 1});
     
    } else {
      //alert(selectedIndex)
      if(selectedIndex.includes(id) === false){
        setState({selectedIndex: [...selectedIndex, id], index: index + 1});
      
      }
    }
  };

  return (
    <View>
      <ScrollView
        style={{
          marginTop: 33,
          marginHorizontal: 16,
        }}>
        <Text>
         Top Amenities
        </Text>
        <View style={styles.container}>
          {Top_Amenities.map((data, id) => (
            <Amenties
              item={data}
              id={data.id.toString()}
              callBack={(id) => {
                selectedItem(id);
                console.log(selectedIndex);
              }}
            />
          ))}
        </View>
      
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    borderWidth: 1,
    borderColor: "grey",
    marginVertical: 12,
    paddingHorizontal: 16,
    paddingVertical: 23,
    borderRadius: 5,
  },
  amenities: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginVertical: 12,
  },
});
export default AddAmenties;

React Native，从列表中选择多个项目

1 个答案: