Question

所以我有多个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时。

Answer 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;
    }
  }

Plunker demo

隐藏当前并在ciick上打开之前？

1 个答案: