所以我有多个div,我打开并隐藏点击。我想要的是有一个后退按钮,所以当用户点击它以隐藏当前div并打开之前。有什么建议怎么办?我使用布尔变量import React, { Component } from 'react';
import { Container, Content, List, ListItem, Text } from 'native-base';
import { Alert } from 'react-native';
export default class App extends Component {
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
Alert.alert("I am clicked");
// Call method from parent
//this.props.onPress();
}
render() {
return (
<Container>
<Content>
<List>
<ListItem button={true} onPress={this.handleClick}>
<Text>Simon Mignolet</Text>
</ListItem>
<ListItem button={true} onPress={() => { this.handleClick() }}>
<Text>Nathaniel Clyne</Text>
</ListItem>
<ListItem button={true} onPress={this.handleClick}>
<Text>Dejan Lovren</Text>
</ListItem>
</List>
</Content>
</Container>
);
}
}
- true
来显示和隐藏div。像历史一样,但它们都在同一页上。
false
示例:如果我想显示<div *ngIf="visible = !visible"></div>
<div *ngIf="visible1 = !visible1"></div>
<div *ngIf="visible2 = !visible2"></div>
<div *ngIf="visible3 = !visible3"></div>
的内容,我可以来自div 3
div 2
和div 1
。所以我想记住我来的div,所以当我按下按钮隐藏它并打开那个div时。
答案 0 :(得分:1)
您可以创建一个array
来跟踪哪些div被点击/隐藏。然后,当单击后退按钮时,您可以执行弹出以获取最后添加的div。返回值可用于显示div。
示例代码:
<div *ngIf="visible1 == true" (click)="visible1 = false; addToHistory('visible1')"
style="width: 400px; height: 50px; background: skyblue; margin-bottom: 5px">
Div 1
</div>
componet.ts
history = [];
visible1 = true;
visible2 = true;
visible3 = true;
visible4 = true;
constructor() {
}
addToHistory(value){
this.history.push(value);
}
getFromHistory(){
let x = this.history.pop();
if(x == 'visible1'){
this.visible1 = true;
}
if(x == 'visible2'){
this.visible2 = true;
}
if(x == 'visible3'){
this.visible3 = true;
}
if(x == 'visible4'){
this.visible4 = true;
}
}