Question

我有一个主要活动和三个片段。我想从第二个片段移动到第三个片段。我在第二个片段上有show logs按钮，当点击show logs按钮时，它应该将用户带到第三个片段，即SHOW LOGS片段。我已经完成了所有工作代码和东西，但不知道如何从片段移动到片段。我无法发布一些隐私问题的代码可以有人帮助我吗？

Answer 1

使用Fragment事务在按钮点击时用第三个片段替换你的第二个片段，例如，

import React from "react";
import { Container, Row, Col } from "reactstrap";

const MorningDrinks = [
  {
    id: "1",
    name: "Tea",
    cost: 15
  },
  {
    id: "2",
    name: "Coffee",
    cost: 15
  },
  {
    id: "3",
    name: "Milk",
    cost: 15
  }
];

const ChoclateDrinks = [
  {
    id: "4",
    name: "Smothe",
    cost: 15
  },
  {
    id: "5",
    name: "hot Chocolate",
    cost: 15
  }
];

class MenuCard extends React.Component {
  state = {
    selectedItems: [],
    counter: 1
  };

  selectItem = item => {
    if (this.state.selectedItems.includes(item)) {
      this.setState(prevState => ({
        selectedItems: prevState.selectedItems,
        counter: ++this.state.counter
      }));
    } else {
      this.setState(prevState => ({
        selectedItems: prevState.selectedItems.concat(item)
      }));
    }
  };

  render() {
    return (
      <Container>
        <p>
          Welcome {this.props.name} !Pick your any Break-fast menu you want{" "}
        </p>
        <Row>
          <Col xs="3">
            <ul>
              <h2>Morning Drinks </h2>

              {MorningDrinks.map((item, i) => (
                <li
                  style={{ cursor: "pointer" }}
                  key={i}
                  onClick={() => this.selectItem(item)}
                >
                  {" "}
                  {item.name} {item.cost}{" "}
                </li>
              ))}
            </ul>
            <ul>
              <h2>Chocolate Drinks </h2>
              {ChoclateDrinks.map((item, i) => (
                <li
                  style={{ cursor: "pointer" }}
                  key={i}
                  onClick={() => this.selectItem(item)}
                >
                  {item.name}
                  {item.cost}
                </li>
              ))}
            </ul>
          </Col>

          <Col xs="3">
            <ul>
              <h2>Your orders </h2>
              {this.state.selectedItems.map((item, i) => (
                <li key={i}>
                  {item.name}
                  {item.cost}
                  {this.state.counter}
                </li>
              ))}
            </ul>
          </Col>

          <Col xs="3">
            <ul>
              <h3>Total</h3>

              {this.state.selectedItems.reduce(
                (acc, item) => acc + item.cost * this.state.counter,
                0
              )}
            </ul>
          </Col>
        </Row>
      </Container>
    );
  }
}

export default MenuCard;

希望它有所帮助！

如何在按钮的单击android中从一个片段移动到另一个片段？

1 个答案: