javascript - 反应原生,从列表中选择多个项目
问题描述
我使用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})}
/>
))}
有人可以帮忙吗
解决方案
您需要将列表的 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;
推荐阅读
- php - 使用 eloquent 检索由 SQL LIKE 运算符组成的集合
- java - 以对象为键、整数为值对 Hashmap 进行排序
- elasticsearch - Rails,searchkick(Elasticsearch 2.3)完成提示错误
- python - f-score:ValueError:分类指标无法处理多标签指标和连续多输出目标的混合
- javascript - 从显示为 Object 对象的 XML 检索数据
- encryption - NFC 通信 - Mifare DESFire EV1 - AES - 读取数据
- c# - How to access AWS.AppSyc based GraphQL endpoint using AWS SDK for .Net
- php - PHP在for循环中复制x个数组元素
- python - 网页抓取股价 - 雅虎财经
- r - r:回合的新可变持续时间