通过react中的特定id启用和禁用onClick()函数
通过react中的特定id启用和禁用onClick()函数
提问于 2021-01-06 23:08:56
我已经创建了自定义的折叠&展开切换菜单及其在视图中对应于API数据的映射。根据API，数据折叠菜单正在重复。但是，当我点击第一折叠菜单，然后第二折叠菜单也是启用，因为共同的功能。当我点击特定的折叠菜单时，我如何处理它。
代码：
<View style={styles.section}>
{Routes.map((o, i) =>
o.subarr.length > 0 ? (
<View>
<TouchableOpacity onPress={toggleExpand}>
<View style={styles.section}>
<View style={[styles.sidebarDesign]}>
<View style={styles.barIcon}>
<Icon.SimpleLineIcons
name={o.icon}
size={heightToDp('3%')}
color={Color.gray}
/>
</View>
<View style={styles.barLabel}>
<Text style={styles.labelStyle}>
{o.title.toUpperCase()}
</Text>
</View>
<View style={styles.barIcon}>
<Icon.SimpleLineIcons
name={expanded ? 'arrow-up' : 'arrow-down'}
size={heightToDp('3%')}
color={Color.grayDark}
/>
</View>
</View>
</View>
</TouchableOpacity>
{o.subarr.map((r, j) => (
<View>
{expanded && (
<View style={[styles.sidebarDesign]}>
<View style={styles.barIcon}>
{/* <Icon.FontAwesome
name={r.icon}
size={20}
color={Color.gray}
/> */}
</View>
<View style={styles.barLabel}>
<Text
onPress={() => {
props.navigation.navigate(r.label);
}}
style={styles.labelStyle}>
{r.label.toUpperCase()}
</Text>
</View>
<View style={styles.barIcon}>
{/* <Text>icon</Text> */}
</View>
</View>
)}
</View>
))}
</View>
) : (
<View>
<View style={[styles.sidebarDesign]}>
<View style={styles.barIcon}>
<Icon.SimpleLineIcons
name={o.icon}
size={heightToDp('3%')}
color={Color.gray}
/>
</View>
<View style={styles.barLabel}>
<Text
onPress={() => {
props.navigation.navigate(o.label);
}}
style={styles.labelStyle}>
{o.title.toUpperCase()}
</Text>
</View>
<View style={styles.barIcon}>{/* <Text>icon</Text> */}</View>
</View>
</View>
),
)}
</View>数据：
{
"id": 1,
"title": "Dashboard",
"label": "Dashboard",
"key": "dashboard",
"icon": "home",
"subarr": []
},
{
"id": 2,
"title": "Pages",
"label": "Pages",
"key": "pages",
"icon": "diamond",
"subarr": [
{
"id": 3,
"title": "Tabs",
"label": "Tabs",
"key": "tab",
"icon": "grid"
},
{
"id": 4,
"label": "Test",
"key": "test",
"icon": "adn",
"title": "Test"
}
]
},
{
"id": 5,
"title": "Components",
"key": "Components",
"label": "component",
"icon": "notebook",
"subarr": [
{
"id": 6,
"label": "Card",
"key": "card",
"icon": "i-card",
"title": "Card"
},
{
"id": 7,
"title": "Button",
"label": "Button",
"key": "button",
"icon": "control-play"
},
{
"id": 8,
"title": "Table",
"label": "Table",
"key": "table",
"icon": "list"
},
{
"id": 9,
"title": "Charts",
"label": "Chart",
"key": "chart",
"icon": "chart"
}
]
},
{
"id": 10,
"title": "notifications",
"label": "User",
"key": "user",
"icon": "bell",
"subarr": []
},
{
"id": 11,
"title": "User profile",
"label": "Profile",
"key": "profile",
"icon": "user",
"subarr": []
},
{
"id": 12,
"title": "Carousel",
"label": "Carousel",
"key": "carousel",
"icon": "layers",
"subarr": []
}
]```回答 1
Stack Overflow用户
发布于 2021-01-07 00:05:28
请检查这个链接
https://snack.expo.io/VYh8f9Fsp
import React from "react";
import { ScrollView, View, Text, TouchableOpacity, Image } from "react-native";
import styles from './styles'
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
itemsList: [
{
item: "Seasons",
route: "",
icon: '',
subItem: [ { name: "Special", find: "Special" },
{ name: "Season 12", find: "12" },
{ name: "Season 11", find: "12" },
{ name: "Explorer 2018", find: "2018" },
{ name: "Season 10", find: "10" },
{ name: "Season 9", find: "9" },
{ name: "Season 8", find: "8" },
{ name: "Season 7", find: "8" },],
},
{ item: "Music Library", route: "PlayList", icon: '', subItem: [ { name: "Special", find: "Special" },
{ name: "Season 12", find: "12" },
{ name: "Season 11", find: "12" },
{ name: "Explorer 2018", find: "2018" },
{ name: "Season 10", find: "10" },
{ name: "Season 9", find: "9" },
{ name: "Season 8", find: "8" },
{ name: "Season 7", find: "8" },], },
{ item: "Artists", route: "Artists", icon: '', subItem: [ { name: "Special", find: "Special" },
{ name: "Season 12", find: "12" },
{ name: "Season 11", find: "12" },
{ name: "Explorer 2018", find: "2018" },
{ name: "Season 10", find: "10" },
{ name: "Season 9", find: "9" },
{ name: "Season 8", find: "8" },
{ name: "Season 7", find: "8" },], },
],
currentIndex: -1,
subIndex: 0,
};
}
handelSelection = (index) => {
var itemsList_Clone = this.state.itemsList;
// itemsList_Clone[index]["selected"] = !itemsList_Clone[index]["selected"];
this.setState({ currentIndex: index, itemsList: itemsList_Clone });
};
subItemSelection = (index, _index) => {
this.setState({ subIndex: index + "_" + _index });
};
handeSubTabSelection = (item, _index, index) => {
this.subItemSelection(index, _index);
};
render() {
const { itemsList, currentIndex, subIndex } = this.state;
return (
<>
<View
style={[
styles.container,
styles.flex(1),
styles.marginTop(-1),
styles.justify_flexStart,
]}
>
<View
style={[
styles.menu_container,
styles.alignItems_flexStart,
styles.paddingHorizontal(20),
// { fontFamily: fonts.UnityTextRegular },
styles.menu_Row,
styles.marginTop(10),
]}
>
<Text
style={styles.menuHeading}
// onPress={() => this.props.navigation.goBack()}
>
{/* Dashboard */}
Home
</Text>
</View>
<ScrollView style={[{ width: "100%" }, styles.marginTop(10)]}>
<View style={[styles.paddingHorizontal(15)]}>
{itemsList.map((data, index) => (
<>
<TouchableOpacity
key={index}
onPress={() => {
// this.props.navigation.navigate(data.route),
this.handelSelection(index);
}}
style={[
styles.margin(5),
// styles.justify_spaceBetween,
styles.flex_Row,
styles.menu_Row,
]}
>
<View>
<Image source={data.icon} style={styles.menuIcons} />
</View>
<View style={[styles.alignSelf_center]}>
<Text style={styles.menuHeading}>{data.item}</Text>
</View>
{index == currentIndex && (
<Text style={styles.menuHeading}>-</Text>
)}
</TouchableOpacity>
{index == currentIndex &&
data.subItem &&
data.subItem.map((_item, _index) => (
<TouchableOpacity
key={_index}
onPress={() =>
this.handeSubTabSelection(_item, _index, index)
}
style={[
styles.margin(4),
styles.justify_spaceBetween,
styles.flex_Row,
]}
>
<View>
<Text
style={[
styles.menuHeading,
styles.fontSize(16),
styles.UnityTextMedium,
styles.margin(2.5),
styles.paddingHorizontal(5),
subIndex == index + "_" + _index && {
color: colors.themeRed,
},
]}
>
{_item.name}
</Text>
</View>
</TouchableOpacity>
))}
</>
))}
</View>
</ScrollView>
</View>
</>
);
}
}
export default (App);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65608009
复制相关文章
点击加载更多
相似问题
禁用/启用Jquery onClick函数
启用和禁用onclick功能
使用onclick事件禁用和重新启用javascript函数
如何启用和禁用onclick事件
按钮禁用/启用onclick
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
